在页面加载时运行 javascript 代码,而不使用 onload 标记
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4722687/
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
Running javascript code on page load, without using the onload tag
提问by Or Weinberger
How can I run a JavaScript code when the page loads without using the onload
tag?
如何在不使用onload
标记的情况下加载页面时运行 JavaScript 代码?
I'm trying to run this script:
我正在尝试运行此脚本:
<script type="text/javascript">
function displayLightbox() {
document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'
}
</script>
That displays a lightbox.
这会显示一个灯箱。
回答by Shadow Wizard is Ear For You
Like this:
像这样:
window.onload = function WindowLoad(event) {
alert("Page is loaded");
}
Edit: if some other code is also using window.onload
after that script then it will be "overwritten" - to make sure it's executed (and abort any other onload
) put it in the bottom of the page.
编辑:如果window.onload
在该脚本之后还使用了其他一些代码,那么它将被“覆盖” - 确保它被执行(并中止任何其他代码onload
)将它放在页面底部。
Edit 2: On second thought, you better addonload listener instead of overwriting it:
编辑 2:再想一想,您最好添加onload 侦听器而不是覆盖它:
<script type="text/javascript">
if (window.addEventListener) { // Mozilla, Netscape, Firefox
window.addEventListener('load', WindowLoad, false);
} else if (window.attachEvent) { // IE
window.attachEvent('onload', WindowLoad);
}
function WindowLoad(event) {
alert("Another onload script");
}
</script>
This will prevent any conflicts with existing code and is more cross browser as far as I can tell.
这将防止与现有代码发生任何冲突,并且据我所知更跨浏览器。
Live test case is available here: http://jsfiddle.net/yahavbr/GZPTG/tested for IE8, Chrome and Firefox (latest versions) feel free to test for more.
现场测试用例可在此处获得:http: //jsfiddle.net/yahavbr/GZPTG/ 已针对 IE8、Chrome 和 Firefox(最新版本)进行测试,请随时测试更多。
回答by yossi
maybe put a javascript code at the end of the page just before the closing </body>
tag.
也许在页面末尾的结束</body>
标记之前放置一个 javascript 代码。
.
.
.
<script>
yourFunctionHere();
</script>
</body>
回答by Martin Jespersen
You can do
你可以做
<head>
<script>
document.onload = function() { /*run code here */}
</script>
</head>
A cleaner way would be
更清洁的方法是
<head>
<script>
document.addEventListener('onload',funciton(){
/* run code here */
});
</script>
</head>
since this allows for multiple eventhandlers to the same event
因为这允许多个事件处理程序处理同一个事件
A better way is usually to react to domReady though.
更好的方法通常是对 domReady 做出反应。
Most javascript libraries support easy ways to hook into domReady. In jQuery for example you can do it like this:
大多数 javascript 库都支持挂钩到 domReady 的简单方法。例如,在 jQuery 中,您可以这样做:
$(function() {
/* code here will be run as soon as the dom is ready to be interacted with,
but before document.load occurs which means you don't have to wait for
images to load for example
*/
});
回答by user1064558
Note that commands outside of functions in a script tag in the header run when the page loads. I don't know if this is actually equivalent to running functions explicitly onLoadvia the body tag attribute, but it is tantamount to the same thing.
请注意,页面加载时会运行标题中脚本标记中函数之外的命令。我不知道这是否真的等同于通过 body 标签属性在onLoad上显式运行函数,但它等同于同一件事。
回答by Tom Gullen
You should use the onload function because you will come across less problems when trying to debug it in different browsers.
您应该使用 onload 函数,因为尝试在不同浏览器中调试它时会遇到较少的问题。
The only other way I know to simulate this effect reliably is to have a script tag block just before the at the footer of the page.
我知道的唯一另一种可靠地模拟这种效果的方法是在页面页脚之前有一个脚本标记块。