Comment lancer plusieurs fonctions JavaScript au chargement d'une page ?

Astuce par
Créé le , mis à jour le (62003 lectures)
Tags : javascript, événements, conflit, onload

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 :

  1. Exploiter un framework tel que jQuery et plusieurs déclarations $(document).ready(function() { ... }
  2. Regrouper toutes les initialisations :
    • dans le code JavaScript :
      window.onload = function() { init1(); init2(); };
    • dans le code (X)HTML :
      <body onload="init1(); init2();">
  3. Utiliser une fonction qui gère l'ajout des gestionnaires d'événement en évitant l'écrasement, comme celle de Simon Willison.
  4. Passer par les gestionnaires d'événement DOM 2 / IE.

Les deux dernières solutions sont évoquées dans les articles JavaScript : organiser son code en modules et La gestion des événements en JavaScript.