何時使用「window.onload」？

在JavaScript中，當我想在加載頁面時運行一次腳本時，我應該使用window.onload還是隻寫腳本？何時使用「window.onload」？

例如，如果我想有一個彈出窗口，要我寫（直接<script>標籤內）：

alert("hello!");

或者：

window.onload = function() { 
    alert("hello!"); 
}

都出現剛過運行該頁面已加載。有什麼區別？

來源

2013-11-24 Lambda Ninja

第一個只在瀏覽器運行時運行。

第二個在運行之前等待窗口加載。

一般來說，你應該做第二次，但你應該附加一個事件監聽器而不是定義函數。例如：

window.addEventListener('load', 
    function() { 
    alert('hello!'); 
    }, false);

來源

2013-11-24 20:03:30

這取決於是否希望在遇到腳本元素時運行它，或者如果您希望在load事件觸發時（即在加載完整文檔（包括諸如圖像之類的東西）之後運行它）。

兩者都不對。

但是，一般來說，我會避免直接將函數分配給onload，而傾向於使用addEventListener（如果需要支持舊瀏覽器，請使用兼容庫）。

來源

2013-11-24 20:02:58 Quentin

這是documentation on MDN。

根據它：

在原稿載置過程結束

負載事件觸發。此時，文檔中的所有對象都在DOM中，並且所有圖像和子幀都已完成加載。

只要瀏覽器在HTML中找到這個位置，您的第一部分代碼就會運行。

當DOM和所有圖像完全加載時（見規格），第二個片段將觸發彈出窗口。

考慮到alert()函數，它在哪一點運行並不重要（除了window對象之外，它並不依賴於任何東西）。但是如果你想操縱DOM - 你應該等待它正確加載。

來源

2013-11-24 20:05:10

@xgqfrms [jQuery並不總是答案]（http://meta.stackoverflow.com/questions/335328/when-is-use-jquery-not-a-valid-answer-to- a-javascript-question）... –

等待DOM加載的原因是，您可以定位在腳本之後加載的任何元素。如果您只是創建alert，那沒關係。但是，假設您的腳本之後的目標文件是div，如果您不等待加載該DOM樹的那一部分，則會出現錯誤。

document.ready是window.onload的絕佳選擇，如果您使用的是jQuery。

在這裏看到：window.onload vs $(document).ready()

來源

2013-11-24 20:05:38 SeeMeCode

你有三個選擇：

直接在腳本標記，只要它被解析運行它。
裏面document.addEventListener("DOMContentLoaded", function(){});會在DOM準備好後運行它。
window.onload function(){})將在所有頁面資源加載後立即運行。

來源

2013-11-24 20:06:09 Henrik

其他的答案都顯得過時了

首先，把腳本頂部和使用window.onload是一個反模式。它最多隻剩下IE時代，或者JavaScript和瀏覽器的錯誤理解。

您只需將您的腳本底部的HTML

<html> 
    <head> 
    <title>My Page</title> 
    </head> 
    <body> 
    content 
    </body> 
    <script src="some-external.js"></script> 
    <script> 
    some in page code 
    </script> 
</html>

的人使用window.onload的唯一原因是因爲他們錯誤地認爲在head部分去需要的腳本。因爲如果你的腳本在頭部，那麼按順序執行，那麼按照的定義，主體和你的內容還不存在，按的順序執行。

hacky的解決方法是使用window.onload等待頁面的其餘部分加載。將腳本移動到底部也解決了該問題，現在不需要使用window.onload，因爲您的主體和內容已經被加載。

更現代的解決方案是在腳本上使用defer標記，但要使用腳本都需要外部腳本。

<head> 
    <script src="some-external.js" defer></script> 
    <script src="some-other-external.js" defer></script> 
</head>

這樣做的好處是，瀏覽器就會立即開始下載腳本，它會在指定的順序執行它們，但它會等待執行它們，直到頁面加載後，無需window.onload或更好但仍然不需要window.addEventListener('load', ...

來源

2018-01-15 02:20:27 gman

哇，這個問題很老！感謝關於'defer'的提示。我已經看到它，但從未意識到它的含義。 –

是啊，這是第一個結果時，谷歌搜索什麼時候使用'window.onload'，因此它似乎需要一個更新的答案 – gman

何時使用「window.onload」？

回答

相關問題