window.onloadvsdocument.onload

哪个更受支持：window.onload还是document.onload？

2341011 次浏览
小开
最佳答案

他们什么时候开火？

window.onload

  • 默认情况下，当整个页面加载时触发，包括其内容（图像、CSS、脚本等）。

在某些浏览器中，它现在接管了document.onload的角色，并在DOM准备就绪时触发。

document.onload

  • 它在DOM准备就绪时被调用，它可以事先来加载图像和其他外部内容。

他们支持得有多好？

window.onload似乎是最广泛支持的。事实上，一些最现代的浏览器在某种意义上已经将document.onload替换为window.onload。

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

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

为了历史的目的。window.onload vsbody.onload：

编码论坛上也有类似的问题关于window.onload超过body.onload的用法。这个结果似乎是你应该使用window.onload，因为它是将你的结构与动作分开是很好的。

小开

window.onload但它们通常是一样的。同样body.onload在IE中变得window.onload。

小开

Window.onload是标准，但是-PS3中的Web浏览器（基于NetFront）不支持窗口对象，因此您无法在那里使用它。

小开

一般的想法是，当文档的窗口是准备介绍时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>

►结果：

这是结果行为，可观察到Chromev20（可能是大多数当前浏览器）。

  • 没有document.onload事件。
  • onload在<body>中声明时触发两次，在<head>中声明时触发一次（其中事件充当document.onload）。
  • 依赖于计数器状态的计数和动作允许模拟这两种事件行为。
  • 或者在超文本标记语言-<head>元素的范围内声明window.onload事件处理程序。

►示例项目：

上面的代码取自这个项目的代码库（index.html和keyboarder.js）。

有关窗口对象的事件处理程序的列表，请参阅MDN留档。

小开

window.onload和onunload是document.body.onload和document.body.onunload的快捷方式

所有html标记上的document.onload和onload处理程序似乎被保留，但从未触发

文档中的“onload”->true

小开

在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>

您将在控制台中看到“窗口加载”（首先出现）和“body onload”Chrome。但是，您将在Firefox和IE中看到“body onload”。如果您在IE和FF的控制台中运行“window.onload.toString()”，您将看到：

msgstr"函数onload（事件）{主体加载处理程序（）}"

这意味着赋值“window.onload=函数（e）…”被覆盖。

小开

添加事件监听器

<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 2017

1 Vanilla JavaScript

window.addEventListener('load', function() {console.log('All assets are loaded')})

2 jQuery

$(window).on('load', function() {console.log('All assets are loaded')})
祝你好运。
小开

根据解析超文本标记语言文档-结束

  1. 浏览器解析超文本标记语言源代码并运行延迟脚本。

  2. 当所有超文本标记语言都已解析并运行时，将在document分派DOMContentLoaded。事件冒泡到window。

  3. 浏览器加载延迟加载事件的资源（如图像）。

  4. load事件在window处被调度。

因此，执行的顺序将是

  1. window的DOMContentLoaded事件侦听器处于捕获阶段
  2. document的DOMContentLoaded事件侦听器
  3. 在冒泡阶段window的DOMContentLoaded事件侦听器
  4. load事件侦听器（包括onload事件处理程序）window

永远不应该调用#2中的气泡#0事件侦听器（包括#1事件处理程序）。可能只调用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};

小开

总之

  • window.onload是不支持IE 6-8
  • 任何现代浏览器都不支持document.onload（事件永远不会触发）

window.onload   = () => console.log('window.onload works');   // fireddocument.onload = () => console.log('document.onload works'); // not fired


提交答案