window.onload与document.onload

2020/09/21 14:01 · javascript ·  · 0评论

哪个受到更广泛的支持:window.onloaddocument.onload

他们什么时候开火?

window.onload

  • 默认情况下,加载整个页面(包括其内容(图像,CSS,脚本等))时将触发该页面

现在,在某些浏览器中,它还可以充当document.onloadDOM 的角色并在DOM准备就绪时触发。

document.onload

  • 当DOM准备就绪时可以调用它,可以加载图像和其他外部内容之前

他们的支持程度如何?

window.onload似乎得到了最广泛的支持。实际上,从某种意义上讲,某些最现代的浏览器已替换document.onloadwindow.onload

浏览器支持问题很可能是许多人开始使用jQuery之类的来处理对文档准备就绪的检查的原因,如下所示:

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

为了历史的目的。window.onloadvs body.onload

不久前forumforforum上也提出了类似的问题,涉及window.onloadover 的用法body.onload结果似乎是您应该使用,window.onload因为将您的结构与操作分开是很好的。

一般的想法是,当文档的窗口准备好呈现window.onload触发,而DOM树(由文档中的标记代码构建)完成document.onload将触发

理想情况下,订阅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)。
  • 根据计数器的状态进行计数和执行操作可以模拟两种事件行为。
  • 或者window.onload,在HTML- <head>元素的范围内声明事件处理程序

►示例项目:

上面的代码摘自该项目的代码库(index.htmlkeyboarder.js)。


有关window对象事件处理程序的列表,请参考MDN文档。

添加事件监听器

<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')
})



祝好运。

根据解析HTML文档-最后

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

  2. 在所有HTML均已解析并运行DOMContentLoaded后,document调度A。事件冒泡到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
};

在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的控制台中运行“ ”,则会看到:

“函数onload(event){bodyOnloadHandler()}”

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

window.onloadonunload有快捷键document.body.onloaddocument.body.onunload

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

' onload'在文档中-> true

window.onload但是,它们通常是同一回事。同样,body.onload在IE中成为window.onload。

Window.onload是标准,但是-PS3(基于Netfront)中的Web浏览器不支持window对象,因此您不能在那里使用它。

简而言之

  • window.onload不支持IE 6-8
  • document.onload 不受任何现代浏览器支持(永远不会触发事件)
本文地址:http://javascript.askforanswer.com/window-onloadyudocument-onload.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!