如何在页面加载上调用JavaScript函数?

传统上，要在页面加载后调用JavaScript函数，您需要向包含一些JavaScript的主体添加onload属性(通常只调用函数)。

<body onload="foo()">

加载页面后，我想运行一些JavaScript代码，用来自服务器的数据动态填充页面的某些部分。我不能使用onload属性，因为我使用的是JSP片段，它没有我可以添加属性的body元素。

是否有其他方法调用JavaScript函数加载?我宁愿不使用jQuery，因为我不是很熟悉它。

1334116 次浏览
小开 
function yourfunction() { /* do stuff on page load */ }


window.onload = yourfunction;

或者使用jQuery，如果你想:

$(function(){
yourfunction();
});

如果你想在页面加载中调用多个函数，请查看这篇文章以获得更多信息:

小开

你最初的问题不清楚，假设凯文的编辑/解释是正确的，那么第一个选项不适用

典型的选项是使用onload事件:

<body onload="javascript:SomeFunction()">
....

你也可以把你的JavaScript放在正文的最后;直到文档完成它才会开始执行。

<body>
...
<script type="text/javascript">
SomeFunction();
</script>
</body>

另一种选择是使用JS框架，它本质上是这样做的:

// jQuery
$(document).ready( function () {
SomeFunction();
});
小开
最佳答案

如果你想让onload方法接受参数，你可以做类似这样的事情:

window.onload = function() {
yourFunction(param1, param2);
};

这将onload绑定到一个匿名函数，当调用该匿名函数时，将使用您给它的任何参数运行所需的函数。当然，您可以在匿名函数内部运行多个函数。

小开

另一种方法是使用事件监听器，下面是你如何使用它们:

document.addEventListener("DOMContentLoaded", function() {
your_function(...);
});

解释:

DOMContentLoaded表示当文档的DOM对象完全加载并被JavaScript看到时。也可以是“点击”、“聚焦”……

函数()匿名函数，当事件发生时将被调用。

小开
你必须在加载(即加载文档/页面)时调用你想要被调用的函数。 例如，当文档或页面加载时，要加载的函数称为“yourFunction”。这可以通过调用文档的加载事件函数来实现。请参阅下面的代码了解更多详细信息。< / p >

试试下面的代码:

<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>
小开

这里有一个技巧(适用于任何地方):

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
小开 

<!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>

小开

为了检测加载的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>


提交答案