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

Nous voulons inclure une les cartes de Google maps API dans notre document. La documentation indique pour initialiser la carte avec une fonction appelée par l'événement onload() de l'organisme.

La façon ordinaire de l'appeler:

<body onload="initialize_map();">

Cela ne fonctionne pas pour nous parce que nous sommes à l'aide de Modèle::Trousse à outils et le <body> étiquette est déjà inclus dans nos wrapper. En bref: La <body> étiquette est déjà imprimée lors de notre code javascript commence à courir.

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

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

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

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

Toute aide à tirer une carte Google Maps apprécié!

InformationsquelleAutor Daniel Böhmer | 2011-02-22
  1. 41
    body.addEventListener("load", init(), false);

    Que la fonction init() est en train de dire exécuter cette fonction et assigner ce qu'elle retourne à la charge de l'événement.

    Ce que vous voulez est d'attribuer la référence à la fonction, pas le résultat. Si vous avez besoin de déplacer le ().

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

    Aussi, vous devriez être en utilisant la fenêtre.onload et pas le corps.onload

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

    InformationsquelleAutor epascarello
  2. 31

    Vous devriez vraiment utiliser ce qui suit (fonctionne dans tous les navigateurs les plus récents):

    window.addEventListener('DOMContentLoaded', init, false);
    • caniuse.com/#search=DOMContentLoaded
    • Pourquoi n'est-ce pas le travail? document.addEventListener('load', init, false);
    • vous devez lier l'événement à la fenêtre en tant que tel: window.addEventListener('load', init, false);
    InformationsquelleAutor Jacob Lauritzen
  3. 18

    Comme @epascarello mentionné pour la norme W3C navigateurs, vous devez utiliser:

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

    Toutefois, si vous voulez qu'il fonctionne sur IE<9 ainsi, 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 en une seule ligne:

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

    Remarque: ici, j'obtient une droite de référence à l'élément de corps via le document, l'enregistrement de la nécessité, pour la première ligne.

    Aussi, si vous êtes à l'aide de jQuery, et que vous voulez utiliser la DOM ready événement plutôt que quand le corps loads, la réponse peut être encore plus court...

    $(init);
    InformationsquelleAutor Mark Rhodes
  4. 8

    Que nous étions déjà à l'aide de jQuery graphique eye-candy fonctionnalité nous nous sommes retrouvés à l'aide de ce. Un code comme celui -

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

    fait tout ce que nous voulions et se soucie des incompatibilités entre navigateurs à sa propre.

    • Il y a aussi un peu plus simple forme de $(function() { init(); }); disponibles.
    • encore plus simple serait $(init);
    InformationsquelleAutor Daniel Böhmer
  5. 2

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

    window.onload = function(){ 
   //your code here
}
    • Il y a 2 problèmes potentiels de cette approche. 1) Vous écrivez toute autre onload événements qui peuvent avoir été attaché, et 2) onload peut-être déjà tiré selon l'endroit où vous mettez ce code, et comme un résultat ne peut jamais le feu
    InformationsquelleAutor Moses