web-dev-qa-db-fra.com

Attacher un événement de chargement de corps avec JS

Comment attacher un événement de chargement de corps avec JS de manière croisée? Aussi simple que ça?

  document.body.onload = function(){
      alert("LOADED!");
  }
javascripthtmleventsonload
37
Robinicks

Cela profite de DOMContentLoaded - qui se déclenche avant la charge - mais vous permet de conserver toute votre discrétion ...

window.onload - Dean Edwards - Le billet de blog en parle davantage - et voici le code complet copié à partir des commentaires de ce même 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;
22
gnarf

Pourquoi ne pas utiliser le propre événement de windowonload?

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

Si je ne me trompe pas, c'est compatible avec tous les navigateurs.

21
Andreas Grech

Événement cross.windows window.load

function load(){}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]( addEventListener ? 'load' : 'onload', load )
14
Aamir Afridi

document.body.onload est un navigateur croisé, mais un mécanisme hérité qui n'autorise qu'un seul rappel (vous ne pouvez pas lui attribuer plusieurs fonctions).

L'alternative "standard" la plus proche, addEventListener n'est pas prise en charge par Internet Explorer (elle utilise attachEvent), vous voudrez donc probablement utiliser une bibliothèque (jQuery, MooTools , prototype.js, etc.) pour faire abstraction de la laideur entre les navigateurs.

9
Marcello Bastea-Forte

l'idée de jcalfee314 a fonctionné pour moi - j'avais un window.onload = onLoad ce qui signifie que les fonctions de <body onload="..."> n'étaient pas appelés (sur lesquels je n'ai aucun contrôle).

Cela l'a corrigé:

oldOnLoad = window.onload
window.onload = onLoad;

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

Modifier: Firefox n'a pas aimé oldOnLoad = document.body.onload;, donc remplacé par oldOnLoad = window.onload.

2
hajamie