導讀	window.onload（）方法用於在網頁載入完成後立即執行的操作，即當HTML文件載入完成後，立即執行某個方法。

window.onload（）通常用於元素，在頁面完全載入後（包括圖片，css檔案等等）執行程式碼。

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

視窗。onload = funcRef ;

在頁面載入完成後funcRef方法會被呼叫。

有多個要執行的函式語法：

視窗。onload = function （）{ Func1 （）; Func2 （）; Func3 （）; ..... }

在頁面載入完成後依次執行Func1，Func2，Func3。

為什麼使用 window.onload()?

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

例項

<!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 物件，所以背景顏色沒有設定成功。報錯資訊如下：
JavaScript window.onload簡介JavaScript window.onload簡介

我們可以新增 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 事件繫結事件處理函式，繫結的是一個匿名函式，當然也可以繫結具名函式，程式碼例項如下:

例項

<!DOCTYPE html>   <html>   <head>   <meta charset=" utf-8">   <title>使用 window.onload() 繫結具體函式</title><script type="text/javascript">
 // 函式名為 runoob
window.onload=function runoob(){
  document.write("菜鳥教程 -- 學的不僅是技術，更是夢想！！！");
}</script></head><body>
  </body></html>

有多個要執行的函式例項：

例項

<!DOCTYPE html>   <html>   <head>   <meta charset=" utf-8">   <title>使用 window.onload() 執行多個函式</title><style type="text/css">#bg{
  width:100px;
  height:100px;
  border:2px solid blue;
}</style><script type="text/javascript">window.onload=function(){
    function runoob1(){
        document.getElementById("bg").style.backgroundColor="#F00";
    }
    function runoob2(){
        document.getElementById("bg").style.width="200px";
        document.getElementById("bg").style.height="200px";
    }
    runoob1();
    runoob2();
}</script></head><body>
    <div id="bg"></div></body></html>

window.onload 與 jQuery ready() 區別

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

以上兩種方式都是在 HTML 文件完畢後再執行 DOM 操作，但它們還是有一定的區別，如下圖：
JavaScript window.onload簡介JavaScript window.onload簡介

JavaScript window.onload簡介

相關文章