Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMaster > LibraryWebsite Development and Maintenance

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

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

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC