什么时候使用“window.onload”?

新手上路,请多包涵

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

例如,如果我想要一个弹出窗口,我应该写(直接在 <script> 标签内):

 alert("hello!");

或者:

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

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

原文由 Jonathan Lam 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 766
2 个回答

window.onload 只在浏览器访问它时运行。

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

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

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

原文由 CrayonViolent 发布,翻译遵循 CC BY-SA 4.0 许可协议

其他答案似乎都过时了

首先,将脚本放在顶部并使用 window.onload 是一种反模式。它充其量是 IE 时代遗留下来的,最坏的情况是对 JavaScript 和浏览器的误解。

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

<html>
  <head>
   <title>My Page</title>
  </head>
  <body>
    content

    <script src="some-external.js"></script>
    <script>
      some in page code
    </script>
  </body>
</html>

人们使用 window.onload 的唯一原因是因为他们错误地认为脚本需要进入 head 部分。因为如果你的脚本在 head 部分,那么事情是按顺序执行的,那么根据 execute in order 的定义,主体和你的内容还不存在。

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', ...

原文由 gman 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏