Add event handler for body.onload by Javascript within <body> part

Asked 22/2, 2011 at 18:21 Answered 15/6, 2014 at 17:2

Solved javascript html dom-events onload-event

We want to include a maps from Google Maps API in our document. The documentation tells to initialize the map with a function called by the onload() event of the body.

The ordinary way to call:

<body onload="initialize_map();">

This doesn't work out for us because we're using Template::Toolkit and the <body> tag is already included in our wrapper. In short: The <body> tag is already printed when our Javascript code starts running.

I tried something like this but it does only work for onclick, not onload. I guess that's because the Javascript code is beneath the <body> tag itself.

var body = document.getElementsByTagName("body")[0];

body.addEventListener("load", init(), false);

function init() {
        alert("it works!");
};

Any help how to fire up a Google Maps map appreciated!

Lontson answered 22/2, 2011 at 18:21 Comment(0)

As we were already using jQuery for a graphical eye-candy feature we ended up using this. A code like

$(document).ready(function() {
    // any code goes here
    init();
});

did everything we wanted and cares about browser incompatibilities at its own.

Lontson answered 24/2, 2011 at 9:7 Comment(2)

There's also a somewhat simpler form of $(function() { init(); }); available. – Red 28/2, 2014 at 13:21

even simpler would be $(init); – Swastika 12/9, 2014 at 17:28

body.addEventListener("load", init(), false);

That init() is saying run this function now and assign whatever it returns to the load event.

What you want is to assign the reference to the function, not the result. So you need to drop the ().

body.addEventListener("load", init, false);

Also you should be using window.onload and not body.onload

addEventListener is supported in most browsers except IE 8.

Pallet answered 22/2, 2011 at 18:26 Comment(2)

For IE it would be attachEvent. quirksmode.org describes it very well: quirksmode.org/js/events_advanced.html – Remainderman 22/2, 2011 at 18:27

It sure is friendly now – Okie 6/4, 2015 at 17:54

You should really use the following instead (works in all newer browsers):

window.addEventListener('DOMContentLoaded', init, false);

Fireboard answered 15/6, 2014 at 17:2 Comment(2)

Why does this not work? document.addEventListener('load', init, false); – Cesaro 13/10, 2015 at 21:9

@Cesaro you should bind that event to the window as such: window.addEventListener('load', init, false); – Fireboard 16/10, 2015 at 10:20

As @epascarello mentioned for W3C standard browsers, you should use:

body.addEventListener("load", init, false);

However, if you want it to work on IE<9 as well you can use:

var prefix = window.addEventListener ? "" : "on";
var eventName = window.addEventListener ? "addEventListener" : "attachEvent";
document.body[eventName](prefix + "load", init, false);

Or if you want it in a single line:

document.body[window.addEventListener ? 'addEventListener' : 'attachEvent'](
    window.addEventListener ? "load" : "onload", init, false);

Note: here I get a straight reference to the body element via the document, saving the need for the first line.

Also, if you're using jQuery, and you want to use the DOM ready event rather than when the body loads, the answer can be even shorter...

$(init);

Braasch answered 12/12, 2012 at 11:47 Comment(0)

As we were already using jQuery for a graphical eye-candy feature we ended up using this. A code like

$(document).ready(function() {
    // any code goes here
    init();
});

did everything we wanted and cares about browser incompatibilities at its own.

Lontson answered 24/2, 2011 at 9:7 Comment(2)

There's also a somewhat simpler form of $(function() { init(); }); available. – Red 28/2, 2014 at 13:21

even simpler would be $(init); – Swastika 12/9, 2014 at 17:28

Simply wrap the code you want to execute into the onload event of the window object:

window.onload = function(){ 
   // your code here
}

Charry answered 22/2, 2011 at 18:27 Comment(1)

There are 2 potential problems with this approach. 1) You over-write any other onload events that may have been attached, and 2) onload may have already fired depending on where you put this code, and as a result may never fire – Whitsuntide 22/2, 2011 at 19:19

Recommended topics

Hot tags