819

哪个得到更广泛的支持：window.onload或document.onload？

4

10 回答 10

835

他们什么时候开火？

window.onload

  • 默认情况下，它会在整个页面加载时触发，包括其内容（图像、CSS、脚本等）。

在某些浏览器中，它现在接管了 DOM 的角色document.onload并在 DOM 准备就绪时触发。

document.onload

  • 当 DOM 准备好时调用它，这可以在加载图像和其他外部内容之前。

他们的支持程度如何？

window.onload似乎得到了最广泛的支持。事实上，一些最现代的浏览器在某种意义上已经document.onload被window.onload.

浏览器支持问题很可能是许多人开始使用诸如jQuery之类的库来处理准备好的文档检查的原因，如下所示：

$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });

为了历史的目的。window.onload与body.onload：

不久前在codingforumswindow.onload上就over的使用提出了一个类似的问题body.onload。结果似乎是你应该使用的window.onload，因为将你的结构与动作分开是很好的。

于 2009-02-25T21:46:45.787 回答
299

一般的想法是window.onload在文档的窗口准备好呈现时触发，而document.onload在DOM 树（由文档中的标记代码构建）完成时触发。

理想情况下，订阅DOM 树事件，允许通过 Javascript 进行屏幕外操作，几乎不会产生 CPU 负载。相反，当多个外部资源尚未被请求、解析和加载时，window.onload可能需要一段时间才能触发。

►测试场景：

要观察差异以及您选择的浏览器如何实现上述事件处理程序，只需在文档的<body>-- 标记中插入以下代码。

<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){ 
    console.log("document.onload", e, Date.now() ,window.tdiff,  
    (window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) ); 
}
window.onload = function(e){ 
    console.log("window.onload", e, Date.now() ,window.tdiff, 
    (window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) ); 
}
</script>

►结果：

这是 Chrome v20（可能是大多数当前浏览器）可观察到的结果行为。

  • 没有document.onload事件。
  • onload在 中声明时触发两次，在 中声明时触发<body>一次<head>（然后事件充当document.onload）。
  • 根据计数器的状态进行计数和操作允许模拟这两种事件行为。
  • 或者，在 HTML-元素window.onload的范围内声明事件处理程序。<head>

►示例项目：

上面的代码取自这个项目的代码库（index.html和keyboarder.js）。

有关窗口对象的事件处理程序列表，请参阅 MDN 文档。

于 2011-09-10T12:05:03.700 回答
201

添加事件监听器

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      /* 
        - Code to execute when only the HTML document is loaded.
        - This doesn't wait for stylesheets, 
          images, and subframes to finish loading. 
      */
  });
</script>

Update March 2017

1 香草 JavaScript

window.addEventListener('load', function() {
    console.log('All assets are loaded')
})

2 jQuery

$(window).on('load', function() {
    console.log('All assets are loaded')
})
祝你好运。
于 2016-06-28T11:57:27.233 回答
97

根据Parsing HTML documents - The end ,

  1. 浏览器解析 HTML 源代码并运行延迟脚本。

  2. A在所有 HTML 都被解析并运行时DOMContentLoaded调度。document事件冒泡到window.

  3. 浏览器加载延迟加载事件的资源（如图像）。

  4. 一个load事件在window.

因此，执行顺序将是

  1. DOMContentLoadedwindow捕获阶段的事件监听器
  2. DOMContentLoaded的事件监听器document
  3. DOMContentLoadedwindow处于冒泡阶段的事件监听器
  4. load的事件监听器（包括onload事件处理程序）window

永远不应调用其中的气泡load事件侦听器（包括onload事件处理程序） 。document可能只调用捕获load侦听器，但由于加载了像样式表这样的子资源，而不是由于文档本身的加载。

window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - bubble'); // 3rd
});

window.addEventListener('load', function() {
  console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
  /* Filter out load events not related to the document */
  if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
    console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
  console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
  console.log('window - load - bubble'); // 4th
});

window.onload = function() {
  console.log('window - onload'); // 4th
};
document.onload = function() {
  console.log('document - onload'); // DOES NOT HAPPEN
};

于 2016-07-22T02:49:12.703 回答
14

在 Chrome 中，window.onload 与 不同<body onload="">，而在 Firefox（35.0 版）和 IE（11 版）中它们是相同的。

您可以通过以下代码段进行探索：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--import css here-->
        <!--import js scripts here-->

        <script language="javascript">

            function bodyOnloadHandler() {
                console.log("body onload");
            }

            window.onload = function(e) {
                console.log("window loaded");
            };
        </script>
    </head>

    <body onload="bodyOnloadHandler()">

        Page contents go here.

    </body>
</html>

您将在 Chrome 控制台中看到“加载窗口”（首先出现）和“加载正文”。但是，您只会在 Firefox 和 IE 中看到“body onload”。如果你window.onload.toString()在 IE & FF 的控制台运行“”，你会看到：

“函数加载（事件）{bodyOnloadHandler（）}”

这意味着赋值“window.onload = function(e)...”被覆盖。

于 2015-01-26T04:08:11.900 回答
9

window.onload是和的onunload捷径document.body.onloaddocument.body.onunload

document.onload所有 html 标签上的onload处理程序似乎都被保留但从未触发

' onload'在文档中-> true

于 2014-06-12T00:21:39.993 回答
6

简而言之

  • window.onloadIE 6-8不支持
  • document.onload任何现代浏览器都不支持（从不触发事件）

window.onload   = () => console.log('window.onload works');   // fired
document.onload = () => console.log('document.onload works'); // not fired

于 2020-05-11T08:49:48.063 回答
5

window.onload 但是它们通常是相同的。同样 body.onload 在 IE 中变成了 window.onload。

于 2009-02-25T21:47:20.980 回答
1

然而，Window.onload 是标准的——PS3 中的网络浏览器（基于 Netfront）不支持 window 对象，所以你不能在那里使用它。

于 2010-05-19T11:31:31.350 回答
-2

document.load未定义。那你们在说什么？

带有 的事件document.addEventListener('load',cbFunc)，cbFunc将永远不会被触发。

于 2021-11-07T21:49:38.013 回答