addLoadEvent不與onload事件衝突

Question

幫助我使用的是流行的addLoadEvent爲我所有的JS加載如下：

function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
    window.onload = func; 
    } else { 
    window.onload = function() { 
     if (oldonload) { 
     oldonload(); 
     } 
     func(); 
    } 
    } 
} 

addLoadEvent(locationToggle); 
addLoadEvent(step1); 
addLoadEvent(step2); 
addLoadEvent(step3); 
addLoadEvent(getCounties); 
addLoadEvent(mapSelection); 

一切我讀過表明，這是一種避免衝突的onload一個相當防彈方式。然而，這種方法看起來並沒有比在匿名的window.onload函數中包裝函數更好。這兩種方法都會導致與這組函數相同的負載衝突。

我正在從addLoadEvent函數本身的同一文件中加載這些函數。我也使用calender.js這是一個第三方文件，它在一個附加文件中使用mootools 1.2.4。我的文件沒有Javascript。

首先，有人可以驗證我沒有損壞代碼，我正確地使用它。其次，有人會建議爲什麼上述不能解決衝突嗎？

編輯 此問題在所有其他Javascript文件被禁用的情況下仍然存在。

Answer 1

你的代碼沒問題。問題是設置event handlers中的DOM 0的方式不能保證他們不會將替換爲其他代碼。

您可以嘗試新的W3C標準addEventListener和IE版本attachEvent，因爲你通過它們連接的處理不能由第三方代碼來代替。

// window.onload W3C cross-browser with a fallback 
function addLoadEvent(func) { 
    if (window.addEventListener) 
    window.addEventListener("load", func, false); 
    else if (window.attachEvent) 
    window.attachEvent("onload", func); 
    else { // fallback 
    var old = window.onload; 
    window.onload = function() { 
     if (old) old(); 
     func(); 
    }; 
    } 
} 

注意，IE瀏覽器會在您添加的順序執行以相反的順序的功能沒有（如果這是一個問題）。

最後，我不知道你什麼時候想要運行你的代碼，但是如果你不想等待圖像加載，你可以先執行你的函數然後window.onload。

Dean Edwards有一個nice script這將讓你這樣做。

有了這個，你可以將你的函數爲較早事件：的document.ready（DOMContentLoaded）

// document.ready 
function addLoadEvent(func) { 
    if (typeof func == "function") { 
    addLoadEvent.queue.push(func); 
    } 
} 
addLoadEvent.queue = []; 

////////////////////////////////////////////////////////////////////////////// 

// Dean Edwards/Matthias Miller/John Resig 

function init() { 
    // quit if this function has already been called 
    if (arguments.callee.done) return; 

    // flag this function so we don't do the same thing twice 
    arguments.callee.done = true; 

    // kill the timer 
    if (_timer) clearInterval(_timer); 

    // do stuff: execute the queue 
    var que = addLoadEvent.queue; 
    var len = que.length; 
    for(var i = 0; i < len; i++) { 
    if (typeof que[i] == "function") { 
     que[i](); 
    } 
    } 
}; 

/* for Mozilla/Opera9 */ 
if (document.addEventListener) { 
    document.addEventListener("DOMContentLoaded", init, false); 
} 

/* for Internet Explorer */ 
/*@cc_on @*/ 
/*@if (@_win32) 
    document.write("<script id=__ie_onload defer src=javascript:void(0)>" 
       +"<\/script>"); 
    var script = document.getElementById("__ie_onload"); 
    script.onreadystatechange = function() { 
    if (this.readyState == "complete") { 
     init(); // call the onload handler 
    } 
    }; 
/*@end @*/ 

/* for Safari */ 
if (/WebKit/i.test(navigator.userAgent)) { // sniff 
    var _timer = setInterval(function() { 
    if (/loaded|complete/.test(document.readyState)) { 
     init(); // call the onload handler 
    } 
    }, 10); 
} 

/* for other browsers */ 
window.onload = init; 

注：用法兩種方法，因爲這是你的版本是相同的。