日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript 中的 window onload 应该什么时候写

發布時間:2025/3/12 javascript 18 豆豆
生活随笔 收集整理的這篇文章主要介紹了 JavaScript 中的 window onload 应该什么时候写 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JavaScript 中的 window onload 應該什么時候寫

1. 頁內式 JS 代碼

1.1 頁內式 JS 代碼寫在 head 內部
如果 script 標簽寫在 head 標簽內部,則位于 body 內的元素將晚于 JS 代碼加載,那么其中一些獲取 DOM 元素的方法將無法取得元素(返回 null)。
以下示例代碼的意圖是把“我要紅紅火火恍恍惚惚!”這一段文字變成紅色,可見并沒有起作用,控制臺也會報錯。

示例代碼:test1.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>寫在頁內且位于head中的JS代碼</title><script>document.getElementById("text").style.color = "red";</script> </head> <body><p id="text">我要紅紅火火恍恍惚惚!</p> </body> </html>

效果及報錯信息

修改代碼,加上 window.onload。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>頁內式JS代碼寫在head內部</title><script>window.onload = function () {document.getElementById("text").style.color = "red";};</script> </head> <body><p id="text">我要紅紅火火恍恍惚惚!</p> </body> </html>

最終顯示效果

1.2 頁內式 JS 代碼寫在 body 結束之前
頁內式 JS 代碼寫在 前面,則其它元素會早于 JS 代碼加載,所以不用寫 window.onload,當然加上也不影響什么。

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>頁內式JS代碼寫在body結束標簽之前</title> </head> <body><p id="text">我要紅紅火火恍恍惚惚!</p><script>document.getElementById("text").style.color = "red";</script> </body> </html>

顯示效果

1.3 結論
對于頁內式 JS 代碼:

如果 script 標簽寫在 head 標簽內部,必須寫 window.onload;
如果 script 標簽寫在 標簽前面,不用寫 window.onload。

2. 外鏈式 JS 代碼

結論:外鏈式 JS 代碼,不管 script 標簽寫在哪里,都需要寫 window.onload。

如果 script 標簽寫在了 head 標簽內部,那么該 JS 代碼會在 HTML 文檔之前加載到瀏覽器。
如果 script 標簽寫在了 前面,同樣無法保證哪個文件最先結束加載,因為瀏覽器可能一次加載多個文件。
關于“一次加載多個文件”的個人理解:同時下載 html 文件和外鏈的 js 文件,并不能確定誰先下載完成。

因為腳本加載時文檔可能不完整,所以模型也不完整。沒有完整的 DOM,getElementsByTagName 等方法就不能正常工作。

3. 雜談

window.onload 為什么管用?

文檔對象 document 會被加載到一個瀏覽器窗口對象 window 里,文檔對象 document 作為窗口對象 window 的一個屬性存在。當窗口對象 window 觸發加載完畢事件(onload)時,window.document 屬性已經可以正常訪問并使用。
所以在 window.onload 指派的回調函數里面,文檔對象 document 是完整的,于是在里面編寫的 JavaScript 代碼能夠訪問到完整的 DOM 樹。
能不能把 script 標簽寫在 標簽之后?

最好不要把 script 標簽寫在 標簽之后,這從 HTML 2.0 開始就是不合標準的。
按照 HTML5 標準,如果在 后再出現

總結

以上是生活随笔為你收集整理的JavaScript 中的 window onload 应该什么时候写的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。