對window.onload()的理解-有解無憂

為什么使用window.onload()

因為 JavaScript 中的函式方法需要在 HTML 檔案渲染完成后才可以使用，如果沒有渲染完成，此時的 DOM 樹是不完整的，這樣在呼叫一些 JavaScript 代碼時就可能報出"undefined"錯誤，

用于在網頁加載完畢之后立即執行的操作，即當HTML檔案加載完畢后，立刻執行某個方法
通常用于<body>元素，在頁面完全載入之后（包括圖片、css檔案等等)執行腳本代碼

window.onload（）的使用語法

window.onload 事件系結事件處理函式，系結的是一個匿名函式，當然也可以系結具名函式

a.只有一個要執行的函式語法

window.onload = funcRef;//在頁面加載完成后 funcRef 方法會被呼叫，

b.有多個要執行的函式語法

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}
//在頁面加載完成后依次執行 Func1、Func2、Func3，

window.onload（）應用舉例

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<title>沒有使用 window.onload() 測驗</title>
<style type="text/css">
#bg{
    width:120px;
    height:120px;
    border:4px solid blue;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F00";
</script>
</head>
<body>
    <div id="bg"></div>
</body>
</html>

以上實體我們要實作的效果是將 div 的背景顏色設定為 #F90，但是并沒有實作此效果，因為代碼是順序執行的，當執行到 document.getElementById("#bg").style.backgroundColor="#F00" 的時候，還沒有加載到此 div 物件，所以背景顏色沒有設定成功，報錯資訊如下：

解決方案添加 window.onload 就可以正常執行，代碼修改如下:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<title>使用 window.onload() 測驗</title>
<style type="text/css">
#bg{
    width:120px;
    height:120px;
    border:4px solid blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
    document.getElementById("bg").style.backgroundColor="#F00";
}
</script>
</head>
<body>
    <div id="bg"></div>
</body>
</html>

window.onload 與 jQuery ready() 區別

window.onload = function () {};    // JavaScript 
$(document).ready(function () {}); // jQuery

以上兩種方式都是在 HTML 檔案完畢后再執行 DOM 操作，但它們還是有一定的區別

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544763.html

標籤：Html/Css

上一篇：圖片在div中居中

下一篇：Typescript 回呼函式、事件偵聽的型別定義與注釋--拾人牙慧