window.onload与document.onload

JavaScript

伽罗JinJin西门

2020-03-11

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

第722篇《window.onload与document.onload》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
TomGO 2020.03.11

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

ItachiJinJin 2020.03.11

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

阿飞小卤蛋 2020.03.11

在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)...”被覆盖。

GO前端 2020.03.11

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

►示例项目:

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


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

猿前端前端 2020.03.11

他们什么时候开火?

window.onload

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

In some browsers it now takes over the role of document.onload and fires when the DOM is ready as well.

document.onload

  • It is called when the DOM is ready which can be prior to images and other external content is loaded.

How well are they supported?

window.onload appears to be the most widely supported. In fact, some of the most modern browsers have in a sense replaced document.onload with window.onload.

Browser support issues are most likely the reason why many people are starting to use libraries such as jQuery to handle the checking for the document being ready, like so:

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

For the purpose of history. window.onload vs body.onload:

A similar question was asked on codingforums a while back regarding the usage of window.onload over body.onload. The result seemed to be that you should use window.onload because it is good to separate your structure from the action.

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android