Question

的index.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

// 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);
//};

在html中使用window.onload时，将忽略来自外部js的window.onload。
当外部js的window.onload被注释掉时，bar.length会返回0.
当删除html中的window.onload时，来自外部js的window.onload工作正常。

任何人都可以解释为什么我不能同时使用window.onload？

如果我必须在html中使用window.onload，如何判断是否从外部js加载了窗口？

Answer 1

1）你绑定的方式，你可以只有一个方法附加到一个事件。您需要为所需内容添加事件侦听器。

window.addEventListener("load", function() { alert("hello!");});

直接设置onload事件的方法将替换以前连接的任何方法。但是，如果您使用侦听器，则可以将其中许多绑定到事件。

2）如果您在外部文件中注释掉onload，当调用document.getElementsByClassName("bar")时，您的文档尚未就绪，那么它将返回0项。

3）使用addEventListener，正如我在第一点中所解释的那样。如果你在这两个地方都应用它，它就像魅力一样。

Answer 2

onload是窗口的属性。它的行为与任何其他变量属性相同。当您尝试使用它两次时，您将在第二次写入时覆盖原始值。

因此，当您将整个外部脚本包装在window.onload中时，会忽略它，因为window.onload会被覆盖为

function() {
    console.log("hello from html");
};

如果您想执行2个函数，请定义2个函数，a和b，

并设置window.onload，如下所示：

window.onload = function(){
  a();
  b();
}

或者，您可以按照Alcides的回答建议的方式绑定2个单独的事件。我个人的观点是，它更清晰，可以用多个函数进行单个绑定，因为它更容易知道什么是绑定，知道你的函数将执行什么顺序，并在一个地方看到发生的一切，但它主要是风格/偏好的问题如果订单无关紧要。

Answer 3

多数民众赞成正确，你正在覆盖自己的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 ); }

在Javascript中忽略外部脚本中的window.onload

3 个答案: