Tuesday, July 14, 2009

How to call my own JavaScript functions on onLoad or onUnLoad event???

While working on the JSP or HTML pages, we are having some requirement to call our own JavaScript functions after execution of existing onLoad functions.

Also most of the time scenario is like - we are including different files & loading JavaScript files(may be 3rd party). Due to this we are not able to know JavaScript function is getting called on the onLoad or onUnload event for the browser window.

And QUESTION arises : “How to call our own JavaScript functions on onLoad or onUnLoad event?”

Here is the ANSWER for that:

Just add the following JavaScript functions to your own file(JSP/ASP/PHP/JS).

1.       addLoadEvent() : This function will append call of your function to existing queue for onLoad event of browser window.

2.       addUnLoadEvent() : This function will append call of your function to existing queue for onUnload event of browser window.

 

function addLoadEvent(func) {

  var oldonload = window.onload;

  if (typeof window.onload != 'function') {

    window.onload = func;

  } else {

    window.onload = function() {

      if (oldonload) {

        oldonload();

      }

      func();

    }

  }

}

 

function addUnLoadEvent(func){

      var oldOnUnLoad = window.onbeforeunload;

      if (typeof window.onbeforeunload != 'function') {

                window.onbeforeunload = func;

      } else {

      window.onbeforeunload = function() {

      if (oldOnUnLoad) {

            oldOnUnLoad();

            }

            func();

         }

      }

}

 

How to call these functions:

 

In your files make a call to these functions as –

 

addLoadEvent(function(){

                alert(‘Calling myFunction...’);

                myFunction();

                alert(‘ Hurray, myFunction gets called!’);

});

 

addOnLoadEvent(function(){

                alert(‘Calling myFunction...’);

                myFunction();

                alert(‘ Hurray, myFunction gets called!’);

});

 

You can copy & paste these functions to your files & use in the similar way.

Also you can modify the logic of function gets called.