Comment lancer plusieurs fonctions au chargement d'une page ?
Astuce par Julien Royer (Grenoble)
Lors de l'utilisation de plusieurs bibliothèques JavaScript sur une même page, il arrive que seule l'une d'entre elles fonctionne correctement.
Cela est en général dû à un problème d'écrasement des gestionnaires d'événement : en effet, si l'attribut onload est défini plusieurs fois (soit sur l'objet window dans le code JavaScript, soit sur l'élément body dans le code (X)HTML), seule la dernière définition est prise en compte.
Par exemple :
[...]
<script type="text/javascript">
window.onload = init1;
</script>
</head>
<body onload="init2();">
<!-- Seule init2 sera exécutée au chargement de la page -->
[...]Pour éviter ce problème, il existe plusieurs solutions :
- Regrouper toutes les initialisations :
- dans le code JavaScript :
window.onload = function() { init1(); init2(); }; - dans le code (X)HTML :
<body onload="init1(); init2();">
- dans le code JavaScript :
- Utiliser une fonction qui gère l'ajout des gestionnaires d'événement en évitant l'écrasement, comme celle de Simon Willison.
- Passer par les gestionnaires d'événement DOM 2 / IE.
Les deux dernières solutions sont évoquées dans l'article "JavaScript : organiser son code en modules".
