window.onload与document.onload

哪种支持更广泛?window.onload "还是 "document.onload"?

对该问题的评论 (1)
解决办法

他们什么时候开火?

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.onloadbody.onload

不久前在codingforums上也有一个类似的问题 关于 "window.onload "与 "body.onload "的用法。结果 结果似乎是,你应该使用window.onload,因为它是 将你的结构和动作分开是很好的。

评论(11)

一般来说,window.onload在文档的窗口准备好展示时document.onload在DOM树(由文档中的标记代码构建)完成时

理想情况下,订阅DOM树事件,可以通过Javascript进行离屏操作,招致几乎没有CPU负载。 相反,`window.onload在多个外部资源尚未被请求、解析和加载的情况下,可能会花一段时间来启动

►测试场景:

要观察两者之间的差异以及您所选择的浏览器如何实现上述事件处理程序,只需在您的文档's - lt;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`````在lt;body>里面声明两次,在```lt;head>里面声明一次(这里的事件就像```document.onload````)。
  • 计数和依赖于计数器状态的行为允许模拟这两个事件的行为。
  • 或者在HTML-lt;head>元素的范围内声明window.onload事件处理程序。

►示例项目:

以上代码取自[本项目's][2]代码库(index.htmlkeyboarder.js)。


关于[窗口对象的事件处理程序][3]的列表,请参考MDN文档。

1:

[2]: https://github.com/lsauer/KeyBoarder/tree/gh-pages [3]: https://developer.mozilla.org/en-US/docs/DOM/window#Event_handlers

评论(0)

添加事件监听器

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

<hr&gt。 好运。

评论(6)

根据[解析HTML文档--结束][1]。

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

  2. 当所有的HTML都被解析并运行后,在 "document "处会派发一个 "DOMContentLoaded "事件。 该事件冒泡到window

  3. 浏览器加载资源(如图片),延迟加载事件。

  4. window处派发一个load事件。

因此,执行顺序将是

  1. 捕捉阶段的 "window "的 "DOMContentLoaded "事件监听器。
  2. documentDOMContentLoaded事件监听器。

  3. windowDOMContentLoaded事件监听器在气泡阶段。

  4. "window "的 "load "事件监听器(包括 "onload "事件处理)。

"document "中的气泡 "load "事件监听器(包括 "onload "事件处理程序)绝对不能被调用,只有捕获 "load "监听器可能会被调用,但是是由于像样式表这样的子资源的加载,而不是由于文档本身的加载。

<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->

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

[1]: https://www.w3.org/TR/html5/syntax.html#the-end

评论(2)

在Chrome浏览器中,window.onload与<body onload="">不同,而在Firefox(35.0版)和IE(11版)中它们是一样的。

你可以通过下面的代码段来探讨这个问题。




        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



        <script language="javascript">

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

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




        Page contents go here.


你会在 Chrome 控制台中看到 "window loaded"(先出现的) 和 "body onload" 和"body onload"。 然而,在Firefox和IE中,你将只看到"body onload" 在Firefox和IE中,你会看到只有"body onload"。 如果你在IE的控制台中运行"window.onload.toString()" 在IE的控制台中运行& FF,你会看到。

"function onload(event) { bodyOnloadHandler() }"

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

评论(0)

window.onloadonunloaddocument.body.onloaddocument.body.onunload的快捷方式。

document.onloadonload处理程序在所有html标签上似乎是保留的,但从未被触发过。

'onload' in document -> true

评论(0)

然而,它们往往是同一件事。 同样,body.onload在IE中成为window.onload。

评论(0)

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

评论(0)