Question

在JavaScript中，当我想在页面加载时运行一次脚本时，我应该使用window.onload还是只编写脚本？

例如，如果我想要弹出窗口，我应该写（直接在<script>标记内）：

alert("hello!");

或者：

window.onload = function() {
    alert("hello!");
}

两者似乎都在加载页面后运行。有什么区别？

Answer 1

window.onload只是在浏览器到达时运行。

window.addEventListener在运行之前等待加载窗口。

一般来说，你应该做第二个，但你应该附加一个事件监听器而不是定义函数。例如：

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

Answer 2

其他答案似乎都过时了

首先，将脚本放在顶部并使用window.onload是一种反模式。它完全是IE时代遗留下来的，或者是最糟糕的JavaScript和浏览器的错误理解。

您可以将脚本移动到html的底部

<html>
  <head>
   <title>My Page</title>
  </head> 
  <body>
    content
  </body>
  <script src="some-external.js"></script>
  <script>
    some in page code
  </script>
</html>

人们使用window.onload的唯一原因是他们错误地认为脚本需要进入head部分。因为如果你的脚本在head部分中，所以事情是按顺序执行的，那么按照按顺序执行的定义，正文和你的内容还不存在。

hacky解决方法是使用window.onload等待页面的其余部分加载。将脚本移到底部也解决了这个问题，现在无需使用window.onload，因为您的正文和内容已经加载。

更现代的解决方案是在脚本上使用defer标记，但要使用脚本所需的全部内容。

<head>
  <script src="some-external.js" defer></script>
  <script src="some-other-external.js" defer></script>
</head>

这样做的好处是浏览器会立即开始下载脚本，它会按照指定的顺序执行它们，但它会等到页面加载后执行它们，不需要window.onload或更好但仍然不需要window.addEventListener('load', ...

Answer 3

这是documentation on MDN。

根据它：

加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，并且所有图像和子帧都已完成加载。

只要浏览器在HTML中找到此位置，您的第一段代码就会立即运行。

当DOM和所有图像完全加载时，第二个片段将触发弹出窗口（参见规范）。

考虑alert()函数，它将在何时运行并不重要（它不依赖于除window对象之外的任何内容）。但是如果你想操纵DOM - 你肯定会等待它正确加载。

Answer 4

这取决于你是否希望它在遇到脚本元素时运行，或者你希望它在load事件触发时运行（在整个文档（包括图像之类的东西）加载之后）。

两者都不对。

但是，一般情况下，我会避免将函数直接分配给onload，以支持使用addEventListener（如果我需要支持旧浏览器，则使用兼容性库）。

Answer 5

等待加载DOM的原因是您可以定位脚本后加载的任何元素。如果你只是创建一个alert，那没关系。但是，假设您在脚本之后定位了标记中的div，如果您不等到要加载的DOM树的那一部分，则会出现错误。

如果你使用jQuery，

document.ready是window.onload的绝佳替代品。

见这里：window.onload vs $(document).ready()

Answer 6

您有三种选择：

直接在脚本标记内部，一旦解析就会运行它。
内部document.addEventListener( "DOMContentLoaded", function(){});将在DOM准备就绪后运行。
内部window.onload function(){})将在加载所有网页资源后立即运行。

何时使用“window.onload”？

6 个答案: