如何在页面加载时调用 JavaScript function？
[英]How do I call a JavaScript function on page load?
问题描述
传统上，要在页面加载后调用 JavaScript function，您需要向包含 JavaScript 的正文添加一个onload属性（通常只调用一个函数）
<body onload="foo()">
页面加载后，我想运行一些 JavaScript 代码，以使用来自服务器的数据动态填充页面的某些部分。 我不能使用onload属性，因为我使用的是 JSP 片段，这些片段没有我可以添加属性的body元素。
还有其他方法可以在加载时调用 JavaScript function 吗？ 我宁愿不使用 jQuery，因为我对它不是很熟悉。
8 个解决方案
解决方案1
349 已采纳 2010-10-01 20:38:46
如果希望onload方法采用参数，则可以执行以下操作：
window.onload = function() {
yourFunction(param1, param2);
};
这会将onload绑定到一个匿名函数，该匿名函数在调用时将使用您提供的任何参数运行所需的函数。 而且，当然，您可以从匿名函数内部运行多个函数。
解决方案2
63 2012-04-28 21:35:44
另一种方法是使用事件侦听器，这里是如何使用它们：
document.addEventListener("DOMContentLoaded", function() {
you_function(...);
});
说明：
DOMContentLoaded这意味着当文档的DOM对象完全加载并被JavaScript看到时，这也可能是“单击”，“焦点” ...
function（）匿名函数，将在事件发生时被调用。
解决方案3
38 2010-10-01 19:59:14
您最初的问题尚不清楚，假设Kevin的编辑/解释正确，则第一个选项不适用
典型的选项是使用onload事件：
<body onload="javascript:SomeFunction()">
....
您也可以将javascript放在正文的最后； 在文档完成之前，它不会开始执行。
<body>
...
<script type="text/javascript">
SomeFunction();
</script>
</body>
并且，另一个选择是考虑使用本质上是这样做的JS框架：
// jQuery
$(document).ready( function () {
SomeFunction();
});
解决方案4
36 2010-10-01 19:59:05
function yourfunction() { /* do stuff on page load */ }
window.onload = yourfunction;
或使用jQuery（如果需要）：
$(function(){
yourfunction();
});
如果要在页面加载时调用多个函数，请查看本文以获取更多信息：
解决方案5
7 2014-02-26 13:59:03
您必须调用要在加载时调用的函数（即，文档/页面的加载）。 例如，要在文档或页面加载时加载的函数称为“ yourFunction”。 这可以通过在文档的load事件上调用函数来完成。 请参阅下面的代码以获取更多详细信息。
请尝试以下代码：
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
yourFunction();
});
function yourFunction(){
//some code
}
</script>
解决方案6
6 2015-05-20 11:32:49
这是窍门（无处不在）：
r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
解决方案7
6 2017-04-03 08:49:09
<!DOCTYPE html> <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> function codeAddress() { alert('ok'); } window.onload = codeAddress; </script> </head> <body> </body> </html>
解决方案8
1 2019-04-08 19:48:05
对于检测插入到DOM中（从服务器中）的加载的html（使用服务器），请使用MutationObserver或在准备使用数据时检测loadContent函数中的时刻
let ignoreFirstChange = 0; let observer = (new MutationObserver((m, ob)=> { if(ignoreFirstChange++ > 0) console.log('Element added on', new Date()); } )).observe(content, {childList: true, subtree:true }); // TEST: simulate element loading let tmp=1; function loadContent(name) { setTimeout(()=>{ console.log(`Element ${name} loaded`) content.innerHTML += `<div>My name is ${name}</div>`; },1500*tmp++) }; loadContent('Senna'); loadContent('Anna'); loadContent('John');
<div id="content"><div>
当用户到达页面末尾以加载新内容时，如何调用JavaScript（AJAX）函数？
[英]How do you call a JavaScript (AJAX) function when the user reaches the end of a page to load new content?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.