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最新iPhone XS, XS Max, XR信用卡刷卡回饋/分期攻略!(持續更新)

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

【符碼刷卡報】超商消費繳費懶人包+優惠總整理

【7-ELEVEN】國泰/玉山卡消費繳費滿額活動!(2018/11/07~)

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

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

台新@gogo一般1.5%網購3.5%+行動支付/保費密技!

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

全家FamiPay綁台新卡綁卡送購物金,最高滿200送50!(2018/10/01~11/30)