admin管理员组

文章数量:1186151

I have two blocks of JavaScript which both call functions via winodow.onload. One of the functions is called on every page, but the other is only called on one specific page. On that page one function works, but the other does not, and I am not getting any errors that I can see.

Does it matter that both functions are called via window.onload in different script blocks (see example)? Shouldn't this work?

<!--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-->

UPDATE:

I ended up taking zzzzBov's suggestion of using jQuery's $(document).ready(doAction); function. Now I have multiple.js included on a single page all using this call and there is no conflict.

I have two blocks of JavaScript which both call functions via winodow.onload. One of the functions is called on every page, but the other is only called on one specific page. On that page one function works, but the other does not, and I am not getting any errors that I can see.

Does it matter that both functions are called via window.onload in different script blocks (see example)? Shouldn't this work?

<!--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-->

UPDATE:

I ended up taking zzzzBov's suggestion of using jQuery's $(document).ready(doAction); function. Now I have multiple.js included on a single page all using this call and there is no conflict.

Share Improve this question edited Mar 15, 2011 at 18:25 ubiquibacon asked Mar 14, 2011 at 21:23 ubiquibaconubiquibacon 10.7k30 gold badges115 silver badges185 bronze badges 8
  • 1 why does the javascript have to be in two blocks? – errorhandler Commented Mar 14, 2011 at 21:25
  • Once you start getting deeper into modular JavaScript you'll quickly realize it'd be nice to reuse chunks of code in an easier manner. While I don't want to advocate always-using-a-library-for-everything-even-when-it's-not-necessary I highly recommend jQuery for just this sort of thing. – zzzzBov Commented Mar 14, 2011 at 21:34
  • If you want to add multiple event listeners, have a look at: quirksmode.org/js/events_advanced.html – Felix Kling Commented Mar 14, 2011 at 22:04
  • @errorhandler the way the site is set up each page is divided into several .cfm files, each of which represents a certain section of the page. If I want something to appear in the section where component1.cfm is located, I must put my code there. Originally I divided up my scripts in the .cfm files they related to, but now I have enough scripts that it might be easier to lump them all into one .js file and sort it out there. – ubiquibacon Commented Mar 15, 2011 at 3:40
  • 1 @typoknig, also, the jQuery solution to the onload event is jQuery(function($){...your code here...});, you can call that as many times as you need and all will work. – zzzzBov Commented Mar 15, 2011 at 4:35
 |  Show 3 more comments

5 Answers 5

Reset to default 15

The recommended best practice for registering event handlers is to use "addEventListener" (see https://developer.mozilla.org/en/DOM/element.addEventListener). Using this method ensures that the handler is additive and does not replace existing handlers.

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

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

The second onload assignment is erasing the first. So if you have two window.onload assignments on the same page pointing to two different handlers the second will win. You will need to merge them into a single one:

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

As @Darin said, the second assignment is overwriting the first value assigned to onload. Check out Simon Willison's general purpose approach to creating multiple onload events:

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

Used like this:

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

I'll let him explain it:

The way this works is relatively simple: if window.onload has not already been assigned a function, the function passed to addLoadEvent is simply assigned to window.onload. If window.onload has already been set, a brand new function is created which first calls the original onload handler, then calls the new handler afterwards.

Closures are pretty cool.

Simple. Try this

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

}

I ended up taking zzzzBov's suggestion of using jQuery's $(document).ready(doAction); function. Now I have multiple.js included on a single page all using this call and there is no conflict.

本文标签: javascriptShould making two calls to windowonload be validStack Overflow