Question

我正在使用Simile绘制动态时间轴。我还使用内部库添加评论博客。我们的内部库使用body元素的onload事件进行初始化。

<body onload="initComments('myID')">

但是Simile似乎为了自己的目的而劫持了onload，因此initComments（'myID'）永远不会执行。

如果没有更改Simile代码，我怎么能让我的初始化程序运行？

我宁愿不再添加另一个库（即jQuery）来解决问题。

Answer 1

首先，作为一般规则，您希望远离在HTML中嵌入JavaScript作为标记属性。

其次，Simile可能会覆盖onload（使用它的方式与你一样）。因此，您需要在包含Simile后添加onload事件。

使用jQuery：

<script src="/js/blah/simile.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        initComments('myID');
    });
</script>

不使用库（找到here）：

<script src="/js/blah/simile.js" type="text/javascript"></script>
<script type="text/javascript">
  function addOnloadEvent(fnc){
    if ( window.addEventListener ) {
      window.addEventListener( "load", fnc, false );
    } else if ( window.attachEvent ) {
      window.attachEvent( "onload", fnc );
    }
    else {
      var oldOnload = window.onload || function() {};
      window.onload = function(e) {
        oldOnload(e);
        window[fnc](e);
      };
    }
  }

  addOnloadEvent(function() { initComments('myID'); });
</script>

Answer 2

使用jQuery的$(document).ready事件，它允许您添加任意数量的处理程序（与onload不同）。

Answer 3

除了前面提到的jQuery解决方案（我强烈推荐使用它，它很棒）这里是普通的JS解决方案（因为你没有在你的问题中提到关于jQuery的任何内容）：

// Add this to top of your script.
window.onload = function () {
    for (var i = 0; arguments.callee.functions.length > i; i++) {
        arguments.callee.functions[i]();
    }
};
window.onload.functions = [];

// Now for every onload function you want to add, do:
window.onload.functions.push(initComments('myID'));

Answer 4

添加jQuery并使用

$(document).ready(function(){
  // Your code here...
});

还有其他一些方法可以在jQuery中编写它，但我发现这是最具说明性的。

如果您正在进行任何类型的JavaScript开发，那么需要来查看jQuery。这真是太棒了！

Answer 5

被劫持，你的意思是，Simile加载代码并覆盖onload？在这种情况下，请确保您支持它（如Justin says），并在自己覆盖它之前，将onload的值存储在某处，这样它仍然会被调用（来自您自己的处理程序）。

也就是说，如果你不使用jQuery。

Answer 6

如果你看这里，你会看到一个jQuery使用的解决方案，我相信，或者修改它，但它应该适合你的需要。

http://dean.edwards.name/weblog/2006/06/again/

// 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
};

/* 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; */

您将看到最后一行被注释掉了。如果它到达那么远，你会破坏它们（取消注释）或者你的代码将无法运行，但这将适用于主流浏览器。

需要使用body onload事件，但第三方JavaScript库已经劫持了它

6 个答案: