Javascript 如何在JS页面加载时调用函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10593145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call function on page load in JS?
提问by bfavaretto
I have a js function which looks like this
我有一个看起来像这样的 js 函数
function showProducts(){
document.getElementById("shopList").innerHTML = "<ul><li>Test Text</li></ul>";
}
It's a function that has to show an array of my products. I've made an div with id="shopList"in my html page
这是一个必须显示我的产品数组的函数。我id="shopList"在我的 html 页面中做了一个 div
<div id="shopList">
</div>
But how can I call the function to show me the text in the div? It works when I use this as my body tag but I'm not allowed to write any js code in my html or to use onload or onclick. I'm trying to do it with listeners for almost 4 hours and I still did not find a solution. Could someone help me?
但是如何调用该函数来显示 div 中的文本？当我使用它作为我的 body 标签时它有效，但我不允许在我的 html 中编写任何 js 代码或使用 onload 或 onclick。我试图与听众一起做将近 4 个小时，但我仍然没有找到解决方案。有人可以帮助我吗？
<body onload="showProducts()">
回答by Nivas
Using pure javascript:
使用纯 javascript：
window.onload = function(){
};
(or
（或者
function doLoad() {
//Do stuff on load
}
window.onload = doLoad;
With Jquery
使用jQuery
$(document).ready(function(){
});
回答by Mark Reed
Really, assigning to onloadis just shorthand for doing it with listeners. This should work , though I haven't tested it.
真的，分配给onload只是与听众一起做的简写。这应该有效，虽然我还没有测试过。
window.addEventListener("load", showProducts);
回答by bfavaretto
It's not difficult with listeners. Here is a solution (not cross-browser):
对听众来说并不难。这是一个解决方案（不是跨浏览器）：
document.addEventListener("DOMContentLoaded", showProducts);
回答by Anonymous
With Jquery you could do something like this :
使用 Jquery，您可以执行以下操作：
$(document).ready(function(){
showProducts();
});
It waits untill the page is loaded and then executes the function. You just put it in an external .js file and include it in your page.
它一直等到页面加载完毕，然后执行该函数。您只需将它放在一个外部 .js 文件中并将其包含在您的页面中。
(For the people downvoting this answer because it's Jquery, he said he couldn't use onload() so I just mentioned this option. )
（对于因为它是 Jquery 而反对这个答案的人，他说他不能使用 onload() 所以我只是提到了这个选项。）
回答by ajax333221
Just place the script at the bottom:
只需将脚本放在底部：
<body>
...
<script type="text/javascript">
myFunction();
</script>
</body>
回答by CDubbz31
John Resig's simplified version from "Pro JavaScript Techniques". It depends on addEvent.
John Resig 来自“Pro JavaScript Techniques”的简化版本。这取决于 addEvent。
var ready = ( function () {
function ready( f ) {
if( ready.done ) return f();
if( ready.timer ) {
ready.ready.push(f);
} else {
addEvent( window, "load", isDOMReady );
ready.ready = [ f ];
ready.timer = setInterval(isDOMReady, 13);
}
};
function isDOMReady() {
if( ready.done ) return false;
if( document && document.getElementsByTagName && document.getElementById && document.body ) {
clearInterval( ready.timer );
ready.timer = null;
for( var i = 0; i < ready.ready.length; i++ ) {
ready.ready[i]();
}
ready.ready = null;
ready.done = true;
}
}
return ready;
})();
window.onload would work, but it is a different beast. jQuery's $(document).ready() is much more complex and better in most scenarios.
window.onload 会工作，但它是一个不同的野兽。在大多数情况下，jQuery 的 $(document).ready() 更加复杂和更好。
回答by RobG
Given your criteria of "no script in the HTML" and "no onload or onclick listener", you can put the function into a separate file and run it from a script element at the foot of the page:
考虑到“HTML 中没有脚本”和“没有 onload 或 onclick 侦听器”的标准，您可以将该函数放入一个单独的文件中，并从页面底部的脚本元素运行它：
<script type="text/javascript" src="showproducts.js"></script>
so now you have no script in the page and no listeners. The code will be executed when the element is added to the DOM, so as long as it is after the related DIV, you're fine.
所以现在您在页面中没有脚本，也没有侦听器。代码会在元素加入DOM的时候执行，所以只要在相关的DIV之后就可以了。
Incidentally, you don't even need a function, you can just put the statements from the function body into the file.
顺便说一句，您甚至不需要函数，您只需将函数体中的语句放入文件中即可。
