[英]window.onload vs document.onload
哪个得到更广泛的支持： window.onload或document.onload ？
在某些浏览器中，它现在接管了document.onload的角色，并在 DOM 准备就绪时触发。
document.onload
window.onload似乎是最广泛支持的。 事实上，一些最现代的浏览器在某种意义上已经将document.onload替换为window.onload 。
浏览器支持问题很可能是许多人开始使用诸如jQuery之类的库来处理文档准备就绪检查的原因，如下所示：
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
为了历史的目的。 window.onload与body.onload ：
关于window.onload而不是
body.onload的使用，window.onload在 codingforums 上提出了一个类似的问题。 结果似乎是您应该使用window.onload因为将您的结构与动作分开是很好的。
一般的想法是window.onload在文档的 window准备好呈现时触发，并且 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 ）。<head>元素的范围内声明window.onload事件处理程序。►示例项目：
上面的代码取自该项目的代码库（ index.html和keyboarder.js ）。
有关window object 的事件处理程序列表，请参阅 MDN 文档。
添加事件监听器
<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>
Update March 2017window.addEventListener('load', function() {
console.log('All assets are loaded')
})
$(window).on('load', function() {
console.log('All assets are loaded')
})
浏览器解析 HTML 源并运行延迟脚本。
当所有 HTML 已被解析并运行时，将在document中调度DOMContentLoaded 。 事件冒泡到window 。
浏览器加载延迟加载事件的资源（如图像）。
在window处调度load事件。
因此，执行顺序将是
window在捕获阶段的DOMContentLoaded事件监听器document的DOMContentLoaded事件监听器window的DOMContentLoaded事件监听器load window的事件监听器（包括onload事件处理程序） 永远不应调用document中的气泡load事件侦听器（包括onload事件处理程序）。 只有捕获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”。 如果您在 IE & FF 的控制台中运行“ window.onload.toString() ”，您将看到：
“函数加载（事件）{bodyOnloadHandler（）}”
这意味着赋值“window.onload = function(e)...”被覆盖。
window.onload和onunload是document.body.onload和document.body.onunload的快捷方式
所有 html 标签上的document.onload和onload处理程序似乎被保留，但从未触发
文档中的“ onload ”-> true
window.onload 但是它们通常是相同的。 同样 body.onload 在 IE 中变为 window.onload。
Window.onload is the standard, however - the web browser in the PS3 (based on Netfront) doesn't support the window object, so you can't use it there.
简而言之
window.onloaddocument.onload （从不触发事件） window.onload = () => console.log('window.onload works'); // fired document.onload = () => console.log('document.onload works'); // not fired
document.load未定义。 那你们在说什么？
带有document.addEventListener('load',cbFunc)的事件， cbFunc永远不会被触发。
为什么body onload可以工作，但是window.onload或document.onload不能工作
[英]why does body onload work but window.onload or document.onload NOT work
为什么window.onload工作而document.onload不工作？
[英]Why does window.onload work while document.onload doesn't?
window.onload = function () vs window.onload= 的区别
[英]Difference between window.onload = function () vs window.onload=
window.onload = someFunctionName与window.onload = someFunctionName（）
[英]window.onload = someFunctionName vs window.onload = someFunctionName()
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.