[英]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.