哪个更受支持:window.onload还是document.onload?
当前回答
然而,Window.onload是标准的——PS3中的web浏览器(基于Netfront)不支持窗口对象,因此您不能在那里使用它。
其他回答
然而,它们通常是相同的。类似地,body.onload在IE中变为window.onload。
根据解析HTML文档-结束,
浏览器解析HTML源代码并运行延迟脚本。当所有HTML都已解析并运行时,将在文档中发送DOMContentLoaded。事件将弹出窗口。浏览器加载延迟加载事件的资源(如图像)。在窗口处调度加载事件。
因此,执行顺序为
DOMContentLoaded捕获阶段窗口的事件侦听器DOMContentLoaded文档的事件侦听器DOMContentLoaded处于气泡阶段的窗口的事件侦听器加载窗口的事件侦听器(包括onload事件处理程序)
绝不应调用文档中的气泡加载事件侦听器(包括onload事件处理程序)。只能调用捕获加载侦听器,但这是由于子资源(如样式表)的加载,而不是由于文档本身的加载。
window.addEventListener('DOMContentLoaded',函数(){console.log('窗口-DOMContentLoaded-捕获');//第一},true);document.addEventListener('DOMContentLoaded',函数(){console.log('文档-DOMContentLoaded-捕获');//第二},true);document.addEventListener('DOMContentLoaded',函数(){console.log('文档-DOMContentLoaded-气泡');//第二});window.addEventListener('DOMContentLoaded',函数(){console.log('窗口-DOMContentLoaded-气泡');//第三});window.addEventListener('load',函数(){console.log('窗口-加载-捕获');//第四},true);document.addEventListener('load',函数(e){/*筛选出与文档无关的加载事件*/if([style','script'].indexOf(e.target.tagName.toLowerCase())<0)console.log('文档-加载-捕获');//不会发生},true);document.addEventListener('load',function(){console.log('文档-加载-气泡');//不会发生});window.addEventListener('load',函数(){console.log('窗口-加载-气泡');//第四});window.onload=函数(){console.log('窗口-加载');//第四};document.onload=函数(){console.log('文档-加载');//不会发生};
简言之
IE 6-8不支持window.onload任何现代浏览器都不支持document.onload(从不触发事件)
window.onload=()=>console.log('window.onlload-works');//解雇document.onload=()=>console.log(“document.onlload-works”);//未点火
他们什么时候开火?
窗口.卸载
默认情况下,当加载整个页面时,包括其内容(图像、CSS、脚本等),它将被激发。
在某些浏览器中,它现在取代了document.onload的角色,并在DOM就绪时启动。
文档.卸载
当DOM准备就绪时调用,可以在加载图像和其他外部内容之前调用。
他们的支持程度如何?
window.onload似乎是最受支持的。事实上,在某种意义上,一些最现代的浏览器已经用window.onload取代了document.onload。
浏览器支持问题很可能是许多人开始使用jQuery等库来处理文档就绪检查的原因,如下所示:
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
为了历史的目的。window.onload与body.nload:
有一段时间,在编写论坛时也提出了类似的问题返回关于window.onload在body.onload上的用法结果似乎是您应该使用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”。如果你在IE&FF的控制台中运行“window.onload.toString()”,你会看到:
“函数onload(event){bodyOnloadHandler()}”
这意味着赋值“window.onload=函数(e)…”被覆盖。
推荐文章
- 如何使用Jest测试对象键和值是否相等?
- 将长模板文字行换行为多行,而无需在字符串中创建新行
- 如何在JavaScript中映射/减少/过滤一个集?
- Bower: ENOGIT Git未安装或不在PATH中
- 添加javascript选项选择
- 在Node.js中克隆对象
- 为什么在JavaScript的Date构造函数中month参数的范围从0到11 ?
- 使用JavaScript更改URL参数并指定默认值
- 在window.setTimeout()发生之前取消/终止
- 如何删除未定义和空值从一个对象使用lodash?
- 检测当用户滚动到底部的div与jQuery
- 在JavaScript中检查字符串包含另一个子字符串的最快方法?
- 检测视口方向,如果方向是纵向显示警告消息通知用户的指示
- ASP。NET MVC 3 Razor:在head标签中包含JavaScript文件
- 禁用从HTML页面中拖动图像