web-dev-qa-db-fra.com

Méthode recommandée pour utiliser window.onload

Je développe des sites Web, des composants, des modules et des plug-ins Joomla et, de temps à autre, j'ai besoin de la possibilité d'utiliser JavaScript qui déclenche un événement lors du chargement de la page. La plupart du temps, cela est fait en utilisant la fonction window.onload.

Ma question est:  

  1. Est-ce la meilleure façon de déclencher des événements JavaScript sur le chargement de la page ou existe-t-il une meilleure/nouvelle méthode?
  2. S'il s'agit du seul moyen de déclencher un événement lors du chargement de la page, quel est le meilleur moyen de vous assurer que plusieurs événements peuvent être exécutés par des scripts différents?
javascriptjoomlajoomla1.5onload
37
privateace

window.onload = function(){}; fonctionne, mais comme vous l'avez peut-être remarqué, il vous permet de spécifier un seul écouteur .

Je dirais que la meilleure façon de procéder consiste à utiliser un cadre ou simplement une implémentation simple des méthodes natives addEventListener et attachEvent (pour IE), ce qui vous permet de supprimer les écouteurs. pour les événements aussi.

Voici une implémentation multi-navigateur:

// Cross-browser implementation of element.addEventListener()
function listen(evnt, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+evnt, func);
         return r;
    }
    else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.');
}

// Use: listen("event name", elem, func);

Pour le cas window.onload, utilisez: listen("load", window, function() { });

EDITJe voudrais développer ma réponse en ajoutant des informations précieuses qui ont été pointées par d’autres.

Il s’agit de laDOMContentLoaded(les nightlies de Mozilla, Opera et Webkit la supporte actuellement) et de laonreadystatechange(pour IE) events qui peut être appliqué au document object à comprendre lorsque le document est disponible pour être manipulé (sans attendre le chargement de toutes les images/feuilles de style, etc.).

Il y a beaucoup d'implémentations "hacky" pour la prise en charge croisée de navigateurs, donc je suggère fortement d'utiliser un framework pour cette fonctionnalité.

44
Luca Matteis

Les frameworks javascript modernes ont introduit l'idée d'un événement "document ready". Il s'agit d'un événement qui se déclenchera lorsque le document sera prêt à recevoir des manipulations DOM. L'événement "onload" ne se déclenche qu'après le chargement de TOUT sur la page.

Parallèlement à l'événement "document ready", les infrastructures ont fourni un moyen de mettre en file d'attente plusieurs bits de code Javascript et des fonctions à exécuter lorsque l'événement est déclenché. 

Donc, si vous vous opposez aux frameworks, la meilleure façon de procéder est d'implémenter votre propre file d'attente document.onload.

Si vous n'êtes pas opposé aux frameworks, vous voudrez alors examiner jQuery et document.ready , Prototype et dom: charpenté , Dojo et addOnLoad ou Google pour [votre framework ] et "document prêt" ,.

Si vous n'avez pas choisi de framework mais êtes intéressé, jQuery est un bon point de départ. Cela ne change en rien les fonctionnalités principales de Javascript, et restera généralement en dehors de votre chemin et vous permettra de faire les choses comme vous le souhaitez quand vous le souhaitez. 

10
Alan Storm

Les événements window.onload sont remplacés par plusieurs créations. Pour ajouter des fonctions, utilisez le Window.addEventListener (standard W3C) ou le window.attachEvent (pour IE). Utilisez le code suivant qui a fonctionné. 

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}
10
Devaroop

Joomla étant livré avec MooTools, vous constaterez qu'il est plus simple d'utiliser la bibliothèque MooTools pour votre code supplémentaire. MooTools est livré avec un événement personnalisé appelé domready qui se déclenche lorsque la page est chargée et que l'arborescence du document est analysée.

window.addEvent( domready, function() { code to execute on load here } );

Vous trouverez plus d’informations sur MooTools ici . Joomla 1.5 est actuellement livré avec MT1.1 alors que le Joomla 1.6 alpha inclura MT1.2

2
Arlen

Personnellement, je préfère cette méthode . Non seulement cela vous permet d’avoir plusieurs fonctions onload, mais si un script l’a défini avant, cette méthode est suffisamment agréable pour gérer cela ... Le seul problème qui reste est si une page en charge plusieurs script qui n'utilise pas la fonction window.addLoad(); mais c'est leur problème :).

P.S. C'est aussi très bien si vous voulez "chaîner" plus de fonctions plus tard.

1
Mike

Ceci est le moyen sale mais plus court: P

function load(){
   *code*
}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]
( addEventListener ? 'load' : 'onload', function(){} )
1
Aamir Afridi

Depuis que j'inclus toujours les fichiers JS jQuery/bootstrap au bas du document et que je n'ai aucun accès à $, j'ai développé un minuscule plug-in "init" qui est l'un et le seul script JS que j'inclus tout en haut de mes pages:

window.init = new function() {
    var list = [];

    this.Push = function(callback) {
        if (typeof window.jQuery !== "undefined") {
            callback();
        } else {
            list.Push(callback);
        }
    };

    this.run = function() {

        if (typeof window.jQuery !== "undefined") {
            for(var i in list) {
                try {
                    list[i]();
                } catch (ex) {
                    console.error(ex);
                }
            }
            list = [];
        }
    };

    if (window.addEventListener) {
        window.addEventListener("load", this.run, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", this.run);
    } else {
        if (window.onload && window.onload !== this.run) {
            this.Push(window.onload);
        }
        window.onload = this.run;
    }
};

En utilisant ceci, je peux définir n'importe quel chargeur anonyme sur la page, avant l'inclusion de jQuery et de bootstrap et rester sûr qu'il se déclenchera une fois que jQuery est présent:

init.Push(function() {

    $('[name="date"]').datepicker({
        endDate: '0d',
        format: 'yyyy-mm-dd',
        autoclose: true
    }).on('hide', function() {
        // $.ajax
    });

    $('[name="keyword_id"]').select2();
});
0
yergo