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

這個網誌中的熱門文章

繳納2018/107年度牌照稅信用卡回饋/分期整理!

證件遺失補辦身分證/健保卡/駕照/行照/信用卡總整理

2018最新博客來100,50,25折價券序號e-coupon分享

國泰Koko combo icash網購/超商/icash/繳費5%!

所得稅要繳多少?最新最完整的所得稅計算教學!再教你看懂稅率級距表/免稅額/扣除額!

Line Pay最新信用卡活動+店家30%+回饋整理!

街口支付最新信用卡+店家街口幣回饋整理!

TOEIC多益成績分數查詢、計算標準與換算對照表

週六全家台新滿百最高送20可再搭三大Pay活動!

【符碼刷卡報】2018各家信用卡綁Apple Pay優惠