How to Place JavaScripts in External Files | 2

How to Place JavaScripts in External Files

Multiple onLoads

Many scripts are called using the onLoad event handler. This causes the script to execute once the Web page is loaded in the browser. One problem that occurs is when you load several scripts that make use of the onLoad event handler. The way the JavaScript works is that each one cancels out the previous one, unless they are listed in one of several different ways.

When using a single onLoad event handler, it's called in one of two ways. From within the script, e.g., window.onload=functionName;, or in the <body> tag, e.g., <body onload="functionName();".

One method for calling multiple onLoad event handlers would be to list them in the <body> tag, separated by semicolons. An example would be:

<body onload="functionName1();functionName2();functionName3()">

The problem with placing the onLoad event handler in the <body> tag means you will have to edit the individual Web page if you make any changes to the onLoad event handlers.

A better method would be to call them directly from the script file. That can be accomplished a couple different ways. One method would be as follows:

function start() {
  runFunction1();
  runFunction2();
  runFunction3();
}
window.onload = start;

Using this method, placed in the bottom of the external file, you would create a function and list all the functions that you want executed once the page loads. When the page loads the start function is executed, which then executes the other functions.

Simon Willison created another excellent snippet for dealing with multiple onLoad event handlers:

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

The nice thing about this one is that if any other events were previously assigned to window.onload this script will not override it, but will add the stated functions to it.

A Caution Regarding Global Variables

A potential additional problem ( when combining multiple JavaScripts in a single file) is the overriding of global variables. These are variables declared outside of a function, within the overall script. If two scripts have global variables with the same name, they must be declared within each script using the var keyword:

var newVariable = 254
not
newVariable = 254

In the event that doesn't work, you'll need to change the name of the variables in one of the scripts. (For the sake of convenience, you might want to do this anyway. That way you'll know what value each variable is holding. As long as there aren't any conflicts, it's optional.) Variables defined within a function are local variables and only exist within the function. They don't relate to anything outside of the function. Global and local variables are explained in more detail in Part 4 of the JavaScript Diaries.

One Final Note

In order to use JavaScript external files, your Web server must be set up to map the ".js" file extension to the MIME type "text/javascript." Most servers are set to handle this by default but, in many cases, you probably didn't have a hand in setting up the server so it's hard to tell. If you have a problem using external JavaScript files, you might want to check with the techs who handle your Web server.

Meanwhile ... keep on codin'!

[previous]

Created: February 3, 2006

URL:

How to Place JavaScripts in External Files | 2