ansaurus

Question

Is there += for window.onload in Javascript ?

Answer 1

+3 A:

have you considered a javascript library like jquery, i know that there are other approaches but jquery will make your life so much easier...

$(function(){
   //Do stuff when DOM is loaded.
   func1();
    $('#link').click(function(){
        //bind a click event
    });
});

The classic approach is to just stick all of your functions at the bottom of the page :)

Paul Creasey 2010-02-16 22:46:38

OK, but some of the functions I want to be called on every page and some only on some specific pages. And when I say "on every" page, I want to write it on a single place. How jquery is going to help me ?

anthares 2010-02-16 22:48:58

What if he doesn't want to use jQuery?@anthares, if you want some functions to be called only on specific pages, you need javascript on those pages that will add the specific onload handlers you need.

Vivin Paliath 2010-02-16 22:51:50

@anthares, well since you say asp.net, are you using a masterpage? if so but the general ones in there, if not then i guess you need to wrap a function aroung the common ones and call it in everypage. JQuery just makes everything easier and terser.

Paul Creasey 2010-02-16 22:53:32

@vivin put the functions at the bottom of the page!!!!

Paul Creasey 2010-02-16 22:54:43

@Paul hehe there may be more elegant approaches :)

Vivin Paliath 2010-02-16 22:55:52

@vivin, indeed but i don't consider iterating through an array of delegates elegant when there are solutions like jquery around.

Paul Creasey 2010-02-16 22:58:55

@Paul definitely agree, which is why I mentioned jQuery at the beginning of my answer. I find the closure solution to be far more elegant than the array-based one. I used to provide "use jQuery" as an answer to a lot of questions until someone clued me in to the fact that not everyone wants to, or can use it. So I try to provide alternate solutions that don't use jQuery.

Vivin Paliath 2010-02-16 23:04:07

Indeed I use masterpage

anthares 2010-02-16 23:21:02

Answer 2

+4 A:

You may want to make the best out of anonymous functions:

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

Borrowed from the Top 10 custom JavaScript functions of all time.

Daniel Vassallo 2010-02-16 22:47:27

Answer 3

+15 A:

You can use jQuery to chain on load handlers. Repeatedly using jQuery.load or jQuery(document).ready will chain your handlers (I believe). You other option is to do it programmatically, which means you need an auxiliary function that will chain your onload handlers for you. You can do this with a closure (or anonymous function):

var addOnLoadHandler = function(newHandler) {

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

    else {
        var oldHandler = window.onload;
        window.onload = function() {
            if (oldHandler) {
                oldHandler();
            }
            newHandler();
        };
    }
};

You will have to bind your functions programmatically though, so you would have to do:

addOnLoadHandlers(function() {
 alert("Hi I am the first onLoad handler!");
});

addOnLoadHandlers(function() {
 alert("Hi I am the second onLoad handler!");
});

in a javascript file (or in your html file).

Another approach is to use an array:

var onloaders = new Array();

function runOnLoads() {
    for (i = 0; i < onloaders.length; i++) {
        try {
            var handler = onloaders[i];
            handler();
        } catch(error) {
            alert(error.message);
        }
    }
}

function addLoader(obj) {
    onloaders[onloaders.length] = obj;
}

In your HTML or Javascript file you do:

addLoader(function() {
 alert("Hi I am the first onLoad handler!");
});

addLoader(function() {
 alert("Hi I am the second onLoad handler!");
});

Then in your html you can just do <body onload="runOnLoads()">

Vivin Paliath 2010-02-16 22:48:23

Answer 4

+3 A:

In jquery you can do

$(document).onload(function() {
  // do something
}

//then later on do

$(document).onload(function() {
  // do something here too!
}

jQuery will intelligently add both events to the onload event and both will be executed when the page loads. With jQuery you also get crossbrowser support as an added bonus.

Chris 2010-02-16 23:25:18

Answer 5

+5 A:

jQuery has a nice shorthand for adding multiple defined handlers to the "ready" event (does not work with anonymous functions where you have to use $(document).ready(function(){});).

simply

$(myFunction);
$(myFunction2);

One big advantage is that if the DOM has already loaded, this still gets fired, whereas anything you bind to window.onload after the event will not get called.

findshorty 2010-02-17 06:26:48

ansaurus

tags:

views:

answers:

Is there += for window.onload in Javascript ?

related questions