`Update March 2017`

Question

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

Answer 1

的window.onload

什么时候开火？

window.onload

默认情况下，在整个页面加载时会触发它，包括其内容（图像，CSS，脚本等）。
在某些浏览器中，它现在接管了document.onload的角色，并在DOM准备就绪时触发。

document.onload

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

他们的支持程度如何？

window.onload似乎是受支持最广泛的。实际上，一些最现代的浏览器在某种意义上用window.onload替换了document.onload。浏览器支持问题很可能是许多人开始使用诸如jQuery之类的库来处理文档准备就绪的原因，如下所示：

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

出于历史的目的：

window.onload vs body.onload

作为备注，前一天window.onload就body.onload使用{{1}}的问题提出了类似的问题。结果似乎是您应该使用 window.onload ，因为将结构与操作分开是很好的。

Answer 2

一般的想法是 window.onload触发当文档的窗口准备好演示而 document.onload触发时 DOM树（根据文档中的标记代码构建）已完成。

理想情况下，订阅DOM-tree events，允许通过Javascript进行屏幕操作，导致几乎没有CPU负载。相反， window.onload 可以需要一段时间才能启动，此时尚未请求，解析和加载多个外部资源。

►测试方案：

要观察差异和您的浏览器选择实施上述事件处理程序，只需在文档中插入以下代码 - { {1}} - 标记。

<body>

<强>►Result：

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

没有<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>事件。
document.onload在onload内声明时触发两次，一次在<body>内声明（此时事件充当<head>）。
依赖于计数器状态的计数和动作允许模拟两种事件行为。
或者在HTML - document.onload元素的范围内声明window.onload事件处理程序。

►示例项目：

上面的代码来自this project's代码库（<head>和index.html）。

有关event handlers of the window object的列表，请参阅MDN文档。

Answer 3

添加事件监听器

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      // - Code to execute when all DOM content is loaded. 
      // - including fonts, images, etc.
  });
</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')
})

<小时/> 祝你好运。

Answer 4

根据Parsing HTML documents - The end，

浏览器解析HTML源并运行延迟脚本。
当所有HTML都已解析并运行时，DOMContentLoaded将调度document。该事件会冒泡到window。
浏览器加载延迟加载事件的资源（如图像）。
load会调度window个事件。

因此，执行顺序为

DOMContentLoaded捕获阶段window的事件侦听器

DOMContentLoaded

document

DOMContentLoaded泡沫阶段window的事件监听器

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

Answer 5

在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”。如果你在IE＆amp; amp;的控制台中运行“window.onload.toString()” FF，你会看到：

“function onload（event）{bodyOnloadHandler（）}”

表示赋值“window.onload = function（e）...”被覆盖。

Answer 6

window.onload和onunload是document.body.onload和document.body.onunload

的快捷方式所有html标签上的

document.onload和onload处理程序似乎都被保留但从未被触发

＆＃39; onload＆＃39;在文档中 - ＆gt;真

Answer 7

window.onload然而它们通常是同一个东西。类似地，body.onload在IE中成为window.onload。

Answer 8

Window.onload是标准，但是PS3中的Web浏览器（基于Netfront）不支持窗口对象，因此您无法在那里使用它。

Answer 9

简而言之

window.onload是not supported by IE 6-8
document.onload（永远不会触发事件）

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

window.onload vs document.onload

9 个答案:

的window.onload

`Update March 2017`

1香草JavaScript

2 jQuery