web-dev-qa-db-fra.com

Ajouter un gestionnaire d'événements pour body.onload par javascript dans la partie <body>

Nous voulons inclure une carte de l'API Google Maps dans notre document. La documentation indique d'initialiser la carte avec une fonction appelée par l'événement onload () du corps.

La façon ordinaire d'appeler:

<body onload="initialize_map();">

Cela ne fonctionne pas pour nous car nous utilisons Template :: Toolkit et la balise <body> Est déjà incluse dans notre wrapper. En bref: la balise <body> Est déjà imprimée lorsque notre code javascript démarre.

J'ai essayé quelque chose comme ça, mais cela ne fonctionne que pour onclick, pas onload. Je suppose que c'est parce que le code javascript se trouve sous la balise <body> Elle-même.

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

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

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

Toute aide pour lancer une carte Google Maps est appréciée!

javascripthtmljavascript-eventsonload-event
32
Daniel Böhmer

Comme nous utilisions déjà jQuery pour une fonction graphique de régal pour les yeux, nous avons fini par l'utiliser. Un code comme

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

fait tout ce que nous voulions et se soucie des incompatibilités du navigateur.

8
Daniel Böhmer
body.addEventListener("load", init(), false);

Cette init () dit d'exécuter cette fonction maintenant et d'assigner tout ce qu'elle retourne à l'événement de chargement.

Ce que vous voulez, c'est attribuer la référence à la fonction, pas le résultat. Vous devez donc supprimer le ().

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

Vous devez également utiliser window.onload et non body.onload

addEventListener est pris en charge dans la plupart des navigateurs sauf IE 8 .

42
epascarello

Vous devriez vraiment utiliser ce qui suit à la place (fonctionne dans tous les nouveaux navigateurs):

window.addEventListener('DOMContentLoaded', init, false);
35
Jacob Lauritzen

Comme @epascarello l'a mentionné pour les navigateurs standard du W3C, vous devez utiliser:

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

Cependant, si vous souhaitez qu'il fonctionne également sur IE <9, vous pouvez utiliser:

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

Ou si vous le souhaitez sur une seule ligne:

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

Remarque: ici, j'obtiens une référence directe à l'élément corps via le document, ce qui évite d'avoir besoin de la première ligne.

De plus, si vous utilisez jQuery et que vous souhaitez utiliser le DOM ready événement plutôt que lorsque le corps loads, la réponse peut être encore plus courte ...

$(init);
18
Mark Rhodes

Enveloppez simplement le code que vous souhaitez exécuter dans l'événement onload de l'objet window:

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