外部脚本中的 window.onload 在 Javascript 中被忽略
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15751362/
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
window.onload in external script gets ignored in Javascript
提问by user1643156
index.html
索引.html
<html>
<head>
<script type="text/javascript" src="foo.js"></script>
<script type="text/javascript">
window.onload = function() {
console.log("hello from html");
};
</script>
</head>
<body>
<div class="bar">bar</div>
</body>
</html>
foo.js
foo.js
// this js file will be completely ignored with window.onload
//window.onload = function() {
console.log("hello from external js");
var bar = document.getElementsByClassName("bar");
// this returns 0 instead of 1
console.log(bar.length);
//};
- When
window.onloadis used in html,window.onloadfrom external js will be ignored. - When
window.onloadfrom external js is commented out,bar.lengthreturns 0. - When
window.onloadfrom html is removed,window.onloadfrom external js works fine.
- 当
window.onload在HTML中使用，window.onload从外部JS将被忽略。 - 当
window.onloadfrom external js 被注释掉时，bar.length返回 0。 - 当
window.onloadfrom html 被移除时，window.onloadfrom external js 工作正常。
Can anyone explain why I can't use both window.onload?
谁能解释为什么我不能同时使用两者window.onload？
If I had touse window.onloadin html, how do tell if window is loaded from external js?
如果我必须window.onload在 html 中使用，如何判断窗口是否是从外部 js 加载的？
回答by Alcides Queiroz Aguiar
1)The way you're binding, you can have just one method attached to an event. You need to add an event listener for what you want.
1）你绑定的方式，你可以有一个方法附加到一个事件。您需要为您想要的内容添加一个事件侦听器。
window.addEventListener("load", function() { alert("hello!");});
Setting directly a method to the onload event will replace any previously attached method. But if you use listeners instead, you can have many of them bound to an event.
直接为 onload 事件设置一个方法将替换任何先前附加的方法。但是，如果您改用侦听器，则可以将其中的许多绑定到一个事件。
2)If you comment out the onload in your external file, when the document.getElementsByClassName("bar")is called, your document isn't ready yet, then, it will return 0 items.
2）如果你在外部文件中注释掉onload，当document.getElementsByClassName("bar")调用时，你的文档还没有准备好，那么它会返回0个项目。
3)Use the addEventListener as I explained in the first point. If you apply this in both places, it will work like a charm.
3）使用我在第一点中解释的 addEventListener 。如果你在这两个地方都应用它，它会像魅力一样发挥作用。
回答by Ben McCormick
onloadis a property of window. It acts like any other variable property. When you try to use it twice you're overwriting the original value with your second write.
onload是窗口的属性。它的作用类似于任何其他可变属性。当您尝试使用它两次时，您会在第二次写入时覆盖原始值。
So your entire external script is ignored when you wrap it in window.onload, because window.onloadis then overwritten to be
因此，当您将其包装在 中时window.onload，您的整个外部脚本将被忽略，因为window.onload然后被覆盖为
function() {
console.log("hello from html");
};
If you want to do execute 2 functions, define 2 functions, aand b,
如果你想执行 2 个函数，定义 2 个函数，a然后b，
and set window.onloadlike this:
并设置window.onload如下：
window.onload = function(){
a();
b();
}
Alternatively, you can bind 2 separate events in the way Alcides' answer suggests. My personal view is that its cleaner to do a single bind with multiple functions since its easier to know whats bound, know what order your functions will execute in, and see everything thats happening in one place, but its mostly a matter of style/preference if the order doesn't matter.
或者，您可以按照 Alcides 的回答建议的方式绑定 2 个单独的事件。我个人的观点是，对多个函数进行单一绑定更干净，因为它更容易知道绑定的是什么，知道你的函数将以什么顺序执行，并看到在一个地方发生的一切，但这主要是风格/偏好的问题如果顺序无关紧要。
回答by user1549458
Thats Correct, you are overwriting your own onload, but you can always attach a new event listener to the window like this
没错，您正在覆盖自己的 onload，但您始终可以像这样将新的事件侦听器附加到窗口
function onLoadHandler(){
console.log("hello from external js");
var bar = document.getElementsByClassName("bar");
// page not loaded, so this returns 0 instead of 1
console.log(bar.length);
}
if (window.addEventListener) {
window.addEventListener('load', onLoadHandler); }
else if (window.attachEvent) { window.attachEvent('onload', onLoadHandler ); }
