Question

我有两个JavaScript块，它们都通过winodow.onload调用函数。其中一个函数在每个页面上调用，但另一个函数仅在一个特定页面上调用。在那个页面上，一个功能可以工作，但另一个功能不起作用，我没有收到任何我能看到的错误。

在不同的脚本块中通过window.onload调用这两个函数是否重要（参见示例）？这不应该起作用吗？

<!--some html-->

<script language="JavaScript" type="text/javascript">
    function firstFunction(){
        //do stuff
    }
    window.onload = firstFunction;
</script>

<!--some html-->

<script language="JavaScript" type="text/javascript">
    function secondFunction(){
        //do stuff
    }
    window.onload = secondFunction;
</script>

<!--some html-->

更新

我最终采用了zzzzBov建议使用jQuery的$(document).ready(doAction);函数。现在，我在一个页面上包含多个.js，所有这些都使用此调用，并且没有冲突。

Answer 1

注册事件处理程序的建议最佳做法是使用“addEventListener”（请参阅https://developer.mozilla.org/en/DOM/element.addEventListener）。使用此方法可确保处理程序是附加的，并且不会替换现有的处理程序。

function something() {alert("1");}
function somethingElse() {alert("2");}

window.addEventListener("load", something, false);
window.addEventListener("load", somethingElse, false);

Answer 2

第二个onload作业正在删除第一个。因此，如果您在同一页面上有两个window.onload分配，指向两个不同的处理程序，则第二个将获胜。您需要将它们合并为一个：

<script type="text/javascript">
    function firstFunction(){
        //do stuff
    }
</script>

<!--some html-->

<script type="text/javascript">
    function secondFunction(){
        //do stuff
    }
</script>

<script type="text/javascript">
    window.onload = function() {
        firstFunction();
        secondFunction();
    };
</script>

Answer 3

正如@Darin所说，第二项任务是覆盖分配给onload的第一个值。查看Simon Willison's general purpose创建多个onload事件的方法：

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

像这样使用：

addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* more code to run on page load */ 
});

我会让他解释一下：

这种方式相对而言简单：如果window.onload没有已经分配了一个功能，传递给addLoadEvent的函数是简单地分配给window.onload。如果 window.onload已经设置好了，a 创造了全新的功能首先调用原始onload handler，然后调用新的处理程序之后。

关闭非常酷。

Answer 4

我最终采用了zzzzBov建议使用jQuery的$（document）.ready（doAction）;功能。现在我在一个页面上都包含了多个使用此调用的。并且没有冲突。

Answer 5

简单。试试这个

window.addEventListener("load", function(evt) {
    alert("hello 1");
});
  
window.addEventListener("load", function(evt) {
    alert("hello 2");
});
  
window.addEventListener("load", function(evt) {
    alert("hello 3");
});

}

应该对window.onload进行两次调用是否有效？

5 个答案: