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 🙂