addLoadEvent无助于onload冲突 [英] addLoadEvent is not helping with onload conflict

问题描述

我正在使用流行的addLoadEvent来完成我所有的JS加载：

I'm using the popular addLoadEvent as follows for all my JS loading:

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);

我读过的所有内容都表明这是避免上传冲突的一种相当防弹的方法。然而，这个方法似乎没有比在匿名window.onload函数中包装函数更好。这两种方法都会导致与这组函数发生相同的onload冲突。

Everything I've read suggests this is a fairly bullet proof way of avoiding onload conflicts. And yet this method doesn't appear to working any better than wrapping the functions in an anonymous window.onload function. Both methods are causing identical onload conflicts with this set of functions.

我从与addLoadEvent函数本身相同的文件中加载这些函数。我也在使用calender.js这是第三方文件，它在另一个文件中使用mootools 1.2.4。我的文件没有Javascript。

I am loading these functions from within the same file as the addLoadEvent function itself. I'm also using calender.js which is a third party file which uses mootools 1.2.4 in an additional file. My files are otherwise free of Javascript.

首先，有人可以验证我没有损坏代码，我正在使用它。第二，有人可能会建议为什么以上不能解决冲突？

First, could someone verify I've not damaged the code and I'm using it right. Second could someone suggest why the above is not resolving the conflicts?

编辑
禁用所有其他Javascript文件时问题仍然存在。

edit The problem persists with all other Javascript files disabled.

推荐答案

你的代码很好。问题是以 DOM 0方式设置事件处理程序并不能确保他们不会替换为其他代码。

Your code is fine. The problem is that setting event handlers in the DOM 0 way doesn't ensure that they won't replaced by other code.

您可以尝试新的W3C标准 addEventListener 和IE版本 attachEvent ，因为你附加的处理程序不能被第三方代码替换。

You may try the new W3C standard addEventListener and the IE version attachEvent, because the handlers you attach by them cannot be replaced by 3rd party code.

// 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将以相反的顺序执行该功能不是你添加它们的顺序（如果这是一个问题）。

Note, that IE will execute the function in reversed order not in the order you added them (if this is a concern).

最后，我不知道你什么时候想运行你的代码，但如果你不知道我想等待图片加载你可以提前执行你的功能然后window.onload。

Finally, I don't know when you want to run your code, but if you don't want to wait for images to load you can execute your functions earlier then window.onload.

Dean Edwards 有一个 漂亮的剧本 ，这将让你这样做。

Dean Edwards has a nice script which will let you to do that.

有了这个你可以附加你的功能早期的事件： document.ready （DOMContentLoaded）

With this you can attach your functions for an earlier event: 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;

注意：两种方法的用法与您的版本相同。

Note: the usage is the same for both methods as it was for your version.

这篇关于addLoadEvent无助于onload冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！