7

索引.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);
//};
  1. 当window.onload在 html 中使用时，window.onload来自外部的 js 将被忽略。
  2. 当window.onload从外部 js 被注释掉时，bar.length返回 0。
  3. 当window.onload从 html 被删除时，window.onload从外部 js 工作正常。

谁能解释为什么我不能同时使用两者window.onload？

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

4

3 回答 3

16

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

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

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

2）如果您在外部文件中注释掉onload，当document.getElementsByClassName("bar")调用时，您的文档还没有准备好，那么它将返回0个项目。

3) 使用我在第一点中解释的 addEventListener。如果你在这两个地方都应用它，它会像一个魅力一样起作用。

于 2013-04-01T20:42:11.063 回答
1

onload是窗口的属性。它的作用类似于任何其他变量属性。当您尝试使用它两次时，您将用第二次写入覆盖原始值。

因此，当您将其包装时，您的整个外部脚本将被忽略window.onload，因为window.onload然后被覆盖为

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

如果要执行 2 个函数，请定义 2 个函数，a并且b，

并设置window.onload如下：

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

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

于 2013-04-01T20:37:07.880 回答
0

没错，您正在覆盖自己的 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 ); }
于 2013-04-01T20:55:03.420 回答