window.onload与document.onload

哪个更受支持：window.onload还是document.onload？

当前回答

简言之

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

window.onload=（）=>console.log（'window.onlload-works'）；//解雇document.onload=（）=>console.log（“document.onlload-works”）；//未点火

2020-05-11 08:49:48

其他回答

在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&FF的控制台中运行“window.onload.toString（）”，你会看到：

“函数onload（event）｛bodyOnloadHandler（）｝”

这意味着赋值“window.onload=函数（e）…”被覆盖。

2015-01-26 04:08:11

根据解析HTML文档-结束，

浏览器解析HTML源代码并运行延迟脚本。当所有HTML都已解析并运行时，将在文档中发送DOMContentLoaded。事件将弹出窗口。浏览器加载延迟加载事件的资源（如图像）。在窗口处调度加载事件。

因此，执行顺序为

DOMContentLoaded捕获阶段窗口的事件侦听器DOMContentLoaded文档的事件侦听器DOMContentLoaded处于气泡阶段的窗口的事件侦听器加载窗口的事件侦听器（包括onload事件处理程序）

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

2016-07-22 02:49:12

window.onload和onunload是document.body.onload和document.body_onload的快捷方式

所有html标记上的document.onload和onload处理程序似乎是保留的，但从未触发

文档中的“onload”->true

2014-06-12 00:21:39

一般的想法是，window.onload在文档的窗口准备好显示时启动，document.onloade在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（可能是大多数当前浏览器）的可见行为。

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

►示例项目：

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

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

2011-09-10 12:05:03

添加事件侦听器

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

2017年3月更新

1香草JavaScript

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

2 jQuery

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

Good Luck.

2016-06-28 11:57:27

window.onload与document.onload

推荐文章

最新文章

标签