More Than One Onload Function

Sometimes it is necessary to run more than one onload function when a web page has finished loading. I'll show you how to accomplish it.

Here are examples of the types of functions a web page may need to run immediately after it has finished loading:

1. Start a "time spent on web page" timer.

2. Focus the keyboard cursor on a specific form field

3. Update a section of the web page with user details.

4. Import certain JavaScript functionality with Ajax.

The implementation described in this article will honor any function assigned to an onload attribute that may already exist in the web page's body tag.

How to assign more than one onload function to a web page.

Here are the implementation steps.

1. Publish the functions that will run after the page load like you normally would publish JavaScript functions – right in the source code of the web page or imported from an external file.

2. Somewhere below that, which may be immediately below or further below (optionally in a separate <script>...</script> tag), publish the code of this AddOnloadEvent() function.

   function AddOnloadEvent(f) {
   if(typeof window.onload != 'function') { window.onload = f; }
   else {
      var cache = window.onload;
      window.onload = function() {
         if(cache) { cache(); }
         f();
         };
      }
   }
   
   

3. Somewhere below that, call the AddOnloadEvent() function as many times as there are functions to add to the onload queue. Each call provides one of the function's names to AddOnloadEvent(), assigning that function to the onload queue. Example:

   AddOnloadEvent(Func_Name_A);
   AddOnloadEvent(Func_Name_B);
   AddOnloadEvent(Func_Name_C);
   
   

   The functions are run in the order they are assigned. With the above, function Func_Name_A() will run first, then Func_Name_B(), and after that Func_Name_C().

   If the body tag has an onload attribute, it will run before any of the functions assigned to the onload queue with AddOnloadEvent().

Here is the code for a complete example. To see it work, paste the example into the source code of a web page. Then load the page into your browser.

<script type="text/javascript">

function Function_To_Run_Onload_A() { 
alert('This is Function_To_Run_Onload_A()'); 
}

function Function_To_Run_Onload_B() { 
alert('This is Function_To_Run_Onload_B()'); 
}

function Function_To_Run_Onload_C() { 
alert('This is Function_To_Run_Onload_C()'); 
}

function AddOnloadEvent(f) {
if(typeof window.onload != 'function') { window.onload = f; }
else {
   var cache = window.onload;
   window.onload = function() {
      if(cache) { cache(); }
      f();
      };
   }
}

AddOnloadEvent(Function_To_Run_Onload_A);
AddOnloadEvent(Function_To_Run_Onload_B);
AddOnloadEvent(Function_To_Run_Onload_C);

</script>

With this method, no onload attribute is needed in the body tag. Although that is still an option. The value of any onload attribute in the body tag is preserved.

When more than one function needs to run immediately after a page has finished loading, or even if only one function needs to run, use this method of assigning onload functions.

The functions will run in the order assigned with the AddOnloadEvent(). If the body tag has an onload attribute, it will run first.

Will Bontrager