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


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 get 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
            // call your awesome function

// pass the function you want to call at 'window.onload', in the function defined above
    // 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.

Thanksgiving comment form is right below🙂


  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!

Leave a Reply

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

You are commenting using your 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