Using Javascript window.onload Event Properly

Recently one of the users of Super Socializer contacted me regarding an issue at his website due to the plugin conflict with some other plugin. When I investigated the issue I found that the way window.onload event was being used in the Javascript code of that plugin, was causing the issue. This was quite annoying because the flaw in the code of other’s plugin was causing to break the functionality of my plugin.

I am highlighting that issue here so that coders can keep this in mind while using window.onload event in their code next time.

Generally, people use window.onload in their code like following:


window.onload = function(){
    // x functionality when window loads
}

OR

function myFunc(){
    // required functionality when window loads
}
window.onload = myFunc;

Above code will work fine if there are not other functions hooked on window.onload event when webpage is rendered.

Now consider the case when you have used the above code in your WordPress (or any other technology) plugin/theme. Your plugin is installed on a website that have already other plugins, themes etc pre-installed or going to be installed. If those other plugins, themes also have their functions hooked to window.onload event, only the last function hooked to the onload event will get executed when the webpage loads.

For example, if some other plugin installed at some website has following function hooked to window.onload event


function myAwesomeFunc(){
    // some awesome functionality when window loads
}
window.onload = myAwesomeFunc;

And, fortunately (or unfortunately ;)), your plugin also gets installed at that website, guess what will happen. BOOM!!

Say, your function gets rendered after that of the other plugin, the onload function of other plugin will not get called. Congratulations, your code has knocked the other plugin down 🙂

Keeping things the right way

To get over such a situation, use window.onload as following:


function myPluginLoadEvent(func) {
    // assign any pre-defined functions on 'window.onload' to a variable
    var oldOnLoad = window.onload;
    // if there is not any function hooked to it
    if (typeof window.onload != 'function') {
        // you can hook your function with it
        window.onload = func
    } else { // someone already hooked a function
        window.onload = function () {
            // call the function hooked already
            oldOnLoad();
            // call your awesome function
            func();
        }
    }
}

// pass the function you want to call at 'window.onload', in the function defined above
myPluginLoadEvent(function(){
    // your awesome code to run on window.onload
    alert('window loaded');
});

Above function will check if there is already a function hooked to the window.onload event and will run that before your plugin’s function.

Happy coding.

You can share your views by commenting below 🙂

Advertisements

28 comments

  1. You can also chain additional hooks to the ‘window.onload’ event using an event listener:

    window.addEventListener(‘load’, function () {
    // Your code or function call here.
    }, false);

  2. I think this saved me a lot of time googling for why the window.onload didn’t work. Glad this was the second Google result. Thanks man! (In the end I used jQuery’s $(document).ready function, making this a lot simpler 🙂 )

  3. hi, i notice when using default wordpress comment using your plugin, reply button not work instantly add reply box under the comment author. Instead it reload web page, and then add reply box. I found in your plugin demo too… Can you fix this? Note: try reply in this site then compare it with your plugin demo site…and you will understand what i mean. Anyway, good job for creating this cool plugin 😀

  4. This is superb. I’ve used this in the documentation for a WPF Chart component to redirect the user from google search to a webframe containing navigation tools. Saved us a lot of pain with interacting with other onload events!

  5. Great advice and example. Further explaination please. I am attempting to know what is happening. After reading on Mozilla I believe that once the window load event fires the onload will be called but if there are muliple plugins using the onload event what really happens?

    oldOnLoad becomes the previous firing of window.onload
    func() becomes the plugin’s event using your code. ??? is that correct?

    I wrote a page with an origional window.onload not using a pluginLoadEvent event handler like yours. After that I wrote 2 completely seperate onload.EventHandler similar to your. Next I called the one 5 times and then called the second 5 additional times making 10 calls after the original. Each event was to print to the console which event it was IE “I’m event 1”, “I’m event 2”, “I’m event 3″…

    They printed out in order, but why? how does your snippet link each call to the previous and the next? Does this become a FIFO ‘stack’? This cannot be linked in a chain else it would be FILO wouldn’t it?

  6. Ran into this issue with a click listener on an ecommerce site I’m implementing a heatmap with. The one page I needed the heatmap to work the most was the product page but Woocommerce and other plugins were taking over. Thanks for the fix, very helpful!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s