哪个受到更广泛的支持:window.onload
或document.onload
?
window.onload与document.onload
window.onload但是,它们通常是同一回事。同样,body.onload在IE中成为window.onload。
在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.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.html
和keyboarder.js
)。
他们什么时候开火?
- 默认情况下,会在加载整个页面(包括其内容(图像,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
overbody.onload
. The result seemed to be that you should usewindow.onload
because it is good to separate your structure from the action.
Window.onload是标准,但是-PS3(基于Netfront)中的Web浏览器不支持window对象,因此您不能在其中使用它。