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

index.html

在html中使用

window.onload

时，将忽略来自外部js的

window.onload

当外部js的

window.onload

被注释掉时，

bar.length

返回0

当html中的

window.onload

被删除时，外部js中的

window.onload

工作正常

谁能解释一下为什么我不能同时使用

窗口和onload

---

如果我必须在html中使用

window.onload

，如何判断window是否是从外部js加载的？

onload

是window的一个属性。它的行为类似于任何其他变量属性。当您尝试使用它两次时，您正在用第二次写入覆盖原始值

因此，当您将整个外部脚本包装到

window.onload

中时，它将被忽略，因为

window.onload

将被覆盖为

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

如果要执行2个函数，请定义2个函数，

a

和

b

并按如下方式设置

window.onload

：

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

或者，您可以按照Alcides的回答建议绑定两个单独的事件。我个人的观点是，使用多个函数进行单个绑定更为简洁，因为它更容易知道绑定的内容，知道函数将以什么顺序执行，并且可以看到在一个地方发生的所有事情，但如果顺序不重要，则主要是风格/偏好的问题。

1）绑定的方式，您只能将一个方法附加到事件。您需要为所需添加事件侦听器

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

直接将一个方法设置为onload事件将替换以前附加的任何方法。但如果改用侦听器，则可以将许多侦听器绑定到事件

2） 如果在外部文件中注释掉onload，当调用

document.getElementsByClassName（“bar”）

时，您的文档尚未准备好，那么它将返回0项

---

3） 正如我在第一点中解释的那样，使用addEventListener。如果在这两个位置都应用此选项，它将像一个符咒一样工作。

没错，您正在覆盖自己的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 ); }

---

为什么不尝试在警报函数中为外部js文件使用不同的文本，以查看它从何处加载？我将外部js中的

window.onload

替换为

window.addEventListener

，就像您所说的，它工作起来很有魅力。非常感谢。

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

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