FAQ version Beta 0.5
JavaScript
Comment lancer plusieurs fonctions au chargement d'une page ?
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 "DOM 0" : en effet, si l'attribut "onload" est défini plusieurs fois (soit sur l'objet "window" dans le JavaScript, soit sur l'élément "body" dans le (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 :
1/ Regrouper toutes les initialisations :
- dans le code JavaScript :
window.onload = function() { init1(); init2(); };
- dans le code (X)HTML :
<body onload="init1(); init2();">
2/ Utiliser une fonction qui gère l'ajout des gestionnaires d'événement en évitant l'écrasement, comme celle de Simon Willison : http://simon.incutio.com/archive/2004/05/26/addLoadEvent.
3/ Passer par les gestionnaires d'événement DOM 2 / IE.
Les deux dernières solutions sont évoquées dans le tutoriel "JavaScript : organiser son code en modules" (http://css.alsacreations.com/Tutoriels-JavaScript/JavaScript-organiser-son-code-en-modules#tuto4).
Cela est en général dû à un problème d'écrasement des gestionnaires d'événement "DOM 0" : en effet, si l'attribut "onload" est défini plusieurs fois (soit sur l'objet "window" dans le JavaScript, soit sur l'élément "body" dans le (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 :
1/ Regrouper toutes les initialisations :
- dans le code JavaScript :
window.onload = function() { init1(); init2(); };
- dans le code (X)HTML :
<body onload="init1(); init2();">
2/ Utiliser une fonction qui gère l'ajout des gestionnaires d'événement en évitant l'écrasement, comme celle de Simon Willison : http://simon.incutio.com/archive/2004/05/26/addLoadEvent.
3/ Passer par les gestionnaires d'événement DOM 2 / IE.
Les deux dernières solutions sont évoquées dans le tutoriel "JavaScript : organiser son code en modules" (http://css.alsacreations.com/Tutoriels-JavaScript/JavaScript-organiser-son-code-en-modules#tuto4).
Liens complémentaires