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


相關文章

這個網誌中的熱門文章

【汽機車燃料費攻略】2019/108年度信用卡回饋/分期整理!

【永豐大戶DAWHO】現金回饋信用卡國內2%國外3%最高8%!

【永豐DAWHO攻略】申辦DAWHO帳戶/信用卡最佳申辦順序!

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

【永豐大戶DAWHO】活存100萬內1.1%+16次免費跨轉跨提!

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

秒級偵測網頁更新變動通知(PageMonitor,Check4Change)

【永豐信用卡推薦方案】首刷800+指定卡再200或機場接送!

【超商懶人包】消費享10%回饋攻略+繳費取貨也能賺回饋?

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