javascript
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。
最終顯示效果
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 应该什么时候写的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ajax onerror code,Aj
- 下一篇: java 微信证书文件_JAVA微信企业