传统上,要在页面加载后调用JavaScript函数,您需要向包含一些JavaScript的主体添加一个onload属性(通常只调用函数)。
<body onload="foo()">
加载页面后,我想运行一些JavaScript代码,用来自服务器的数据动态填充页面的某些部分。我不能使用onload属性,因为我使用的是JSP片段,它没有可以添加属性的主体元素。
是否有其他方法调用JavaScript函数加载?我宁愿不使用jQuery,因为我不是很熟悉它。
传统上,要在页面加载后调用JavaScript函数,您需要向包含一些JavaScript的主体添加一个onload属性(通常只调用函数)。
<body onload="foo()">
加载页面后,我想运行一些JavaScript代码,用来自服务器的数据动态填充页面的某些部分。我不能使用onload属性,因为我使用的是JSP片段,它没有可以添加属性的主体元素。
是否有其他方法调用JavaScript函数加载?我宁愿不使用jQuery,因为我不是很熟悉它。
当前回答
如果你想让onload方法接受参数,你可以做类似这样的事情:
window.onload = function() {
yourFunction(param1, param2);
};
这将onload绑定到一个匿名函数,当调用该匿名函数时,将使用您给它的任何参数运行所需的函数。当然,您可以在匿名函数内部运行多个函数。
其他回答
你必须在加载(即加载文档/页面)时调用你想要被调用的函数。 例如,当文档或页面加载时,要加载的函数称为“yourFunction”。这可以通过调用文档的加载事件函数来实现。请参阅下面的代码了解更多详细信息。
试试下面的代码:
<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>
另一种方法是使用事件监听器,下面是你如何使用它们:
document.addEventListener("DOMContentLoaded", function() {
your_function(...);
});
解释:
这意味着当文档的DOM对象完全加载并被JavaScript看到时。也可以是"click", "focus"…
function()匿名函数,当事件发生时将被调用。
检测加载的html(从服务器)插入到DOM使用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>
function yourfunction() { /* do stuff on page load */ }
window.onload = yourfunction;
或者使用jQuery,如果你想:
$(function(){
yourfunction();
});
如果你想在页面加载中调用多个函数,请查看这篇文章以获得更多信息:
使用多个JavaScript Onload函数
这里有一个技巧(适用于任何地方):
r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}