2012年3月8日

JavaScript:如何正確將多個function加到window.onload


 
對於有在寫網頁的人來說,
我們常會希望在網頁載入完成後可以自動執行某些動作,
這時我們就可以利用 onload 這個 event。

圖片來源:http://www.mhtml5.com/2011/05/1324.html/javascript-web

一般直接把 onload 要做的事嵌入 html code 中的用法,
大概會像是在網頁中嵌入顯示程式碼:Google Code Prettify所使用到的這樣:
<body onload='prettyPrint();'>
而如果是在 javascript 中用 function 的方式呼叫的話,大概會長成這樣:
window.onload = function ()
{
    // Do something...
}

一切看來似乎都很簡單且美好對吧?
然而,這些方式是把window.onload所能執行的function給寫死了,
日後若我們想利用Javascript動態新增一個在onload時執行的function2,
如果我們直接像上面一樣用Javascript把function2指定給window.onload:
window.onload = function2 ()
{
    // Do anotherthing...
}
結局就是先前所指定的 window.onload 動作都會被覆蓋,只留下function2。

第一次發現這個問題是因為我寫了第一個部落格工具:
博客來AP策略聯盟商品推薦連結自動轉換工具
當我把這個工具放上部落格後,原先可以運作的Google Code Prettify就不work了!
後來查了很久才發現是因為 onload 的衝突,
新的工具會把原先的 onload 設定給覆蓋掉 orz

那如果我想讓所有的function都能正常運作該怎麼辦呢?
可以參考以下的程式碼:
function2 ()
{
    // Do anotherthing...
}

function addLoadEvent(function2) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
 window.onload = function2;
    } else {
 window.onload = function() {
            if (oldonload) {
  oldonload();
     }
     function2();
 }
    }
}

addLoadEvent(function2);
// 後續還可以繼續用 addLoadEvent 加入更多需要在onload執行的function。

透過這樣的方式我們就可以無限制地把更多function加入,
而且原本的function也會依原先的被加入的順序依序執行囉!

關鍵字:JavaScript, 多個, function, 加, 加入, window, onload, event, 動作, 操作, 同時
參考資料:


更多精選推薦文章