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, 動作, 操作, 同時
參考資料:

這個網誌中的熱門文章

【白沙屯媽祖徒步進香】2024及歷年時程+路線+停留點!

【Hami Video】免費Hami Video體驗/試用序號分享(隨時更新)!

【博客來折價券】博客來免費序號e-coupon分享(持續更新)

【博客來折價券】25/50/100/150現領現折+天天簽到換200+OP兩倍換!

【銀行代碼查詢】3碼銀行代碼列表、7碼分行代碼查詢

【台北中壢】國道客運/公車路線(1818,2022,9001,9025)!