JavaScript：如何正確將多個function加到window.onload
對於有在寫網頁的人來說，
我們常會希望在網頁載入完成後可以自動執行某些動作，
這時我們就可以利用 onload 這個 event。
一般直接把 onload 要做的事嵌入 html code 中的用法，
大概會像是在網頁中嵌入顯示程式碼：Google Code Prettify所使用到的這樣：
一切看來似乎都很簡單且美好對吧？
然而，這些方式是把window.onload所能執行的function給寫死了，
日後若我們想利用Javascript動態新增一個在onload時執行的function2，
如果我們直接像上面一樣用Javascript把function2指定給window.onload：
第一次發現這個問題是因為我寫了第一個部落格工具：
博客來AP策略聯盟商品推薦連結自動轉換工具，
當我把這個工具放上部落格後，原先可以運作的Google Code Prettify就不work了！
後來查了很久才發現是因為 onload 的衝突，
新的工具會把原先的 onload 設定給覆蓋掉 orz
那如果我想讓所有的function都能正常運作該怎麼辦呢？
可以參考以下的程式碼：
透過這樣的方式我們就可以無限制地把更多function加入，
而且原本的function也會依原先的被加入的順序依序執行囉！
關鍵字：JavaScript, 多個, function, 加, 加入, window, onload, event, 動作, 操作, 同時
參考資料：
我們常會希望在網頁載入完成後可以自動執行某些動作，
這時我們就可以利用 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, 動作, 操作, 同時
參考資料：
