40

How do I attach a body onload event with JS in a cross browser way? As simple as this?

  document.body.onload = function(){
      alert("LOADED!");
  }
Josh Darnell
  • 11,304
  • 9
  • 38
  • 66
Robin Rodricks
  • 110,798
  • 141
  • 398
  • 607

6 Answers6

23

Why not use window's own onload event ? 

window.onload = function () {
      alert("LOADED!");
}

If I'm not mistaken, that is compatible across all browsers.

Andreas Grech
  • 105,982
  • 98
  • 297
  • 360
  • 18
    window.onload happens after /everything/ is loaded, including images, etc. If you want to start manipulating the DOM as soon as possible to prevent start-up lag, you can't use window.onload. – rpjohnst Aug 05 '09 at 22:15
22

This takes advantage of DOMContentLoaded - which fires before onload - but allows you to stick in all your unobtrusiveness...

window.onload - Dean Edwards - The blog post talks more about it - and here is the complete code copied from the comments of that same blog.

// Dean Edwards/Matthias Miller/John Resig

function init() {
  // quit if this function has already been called
  if (arguments.callee.done) return;

  // flag this function so we don't do the same thing twice
  arguments.callee.done = true;

  // kill the timer
  if (_timer) clearInterval(_timer);

  // do stuff
};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
  document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
  var script = document.getElementById("__ie_onload");
  script.onreadystatechange = function() {
    if (this.readyState == "complete") {
      init(); // call the onload handler
    }
  };
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      init(); // call the onload handler
    }
  }, 10);
}

/* for other browsers */
window.onload = init;
gnarf
  • 105,192
  • 25
  • 127
  • 161
14

Cross browser window.load event

function load(){}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]( addEventListener ? 'load' : 'onload', load )
Aamir Afridi
  • 6,364
  • 3
  • 42
  • 42
9

document.body.onload is a cross-browser, but a legacy mechanism that only allows a single callback (you cannot assign multiple functions to it).

The closest "standard" alternative, addEventListener is not supported by Internet Explorer (it uses attachEvent), so you will likely want to use a library (jQuery, MooTools, prototype.js, etc.) to abstract the cross-browser ugliness for you.

Volker E.
  • 5,911
  • 11
  • 47
  • 64
Marcello Bastea-Forte
  • 1,167
  • 1
  • 10
  • 7
  • 2
    Internet Explorer supports `addEventListener` [as of version 9](http://msdn.microsoft.com/en-us/library/ie/ff975245(v=vs.85).aspx). – Sampson Oct 28 '14 at 17:03
2

jcalfee314's idea worked for me - I had a window.onload = onLoad which meant that the functions in <body onload="..."> were not being called (which I don't have control over).

This fixed it:

oldOnLoad = window.onload
window.onload = onLoad;

function onLoad()
{
oldOnLoad();
...
}

Edit: Firefox didn't like oldOnLoad = document.body.onload;, so replaced with oldOnLoad = window.onload.

hajamie
  • 2,848
  • 2
  • 22
  • 20
  • As Rusky noted on Andreas's answer, window.onload is different from document.body.onload; it happens after everything is loaded, rather than just the DOM. – Muhd Nov 24 '11 at 03:17
  • Since Firefox at least as far back as version 10 does support oldOnLoad = document.body.onload, I'm using a variation of this: if (oldOnLoad = document.body.onload) { document.body.onload = onLoad; } else { oldOnLoad = window.onload; window.onload = onLoad; }. This seems to give me what I want with most browsers, with the window.onload option as a fallback when needed. – arlomedia Apr 09 '12 at 23:02
-4

Why not using jQuery?

$(document).ready(function(){}))

As far as I know, this is the perfect solution.

Peter
  • 913
  • 1
  • 12
  • 24
jamesse
  • 25
  • 6