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; 

注：用法两种方法，因为这是你的版本是相同的。