Exécuter le code JavaScript après le chargement de la page Web

  1. Ajouter la balise script à la fin de la balise body en JavaScript
  2. Utilisation de l’événement onload en JavaScript
  3. Utilisez l’événement onload sur la balise body en JavaScript
  4. Utilisez l’événement onload sur l’objet window dans un fichier JavaScript

Avant d’exécuter un code JavaScript, nous devons toujours nous assurer que tous les éléments HTML sont d’abord rendus sur le navigateur. Puisque nous ferons référence à ces éléments HTML dans notre code JavaScript, ces éléments doivent être chargés avant la page Web.

Écrire la balise script à l’intérieur de la balise head n’est pas une bonne idée (cela n’a de sens que lorsque vous chargez des scripts tiers dans votre code) car le document HTML est exécuté de haut en bas et la balise head est présent avant la balise body. Ainsi, il sera exécuté en premier puis la balise body.

Étant donné que tout le contenu de notre page Web est présent à l’intérieur de la balise body et que la balise body est présente après la balise head, l’ajout du code JavaScript à l’intérieur de head n’est pas nécessaire car il ne pourra pas trouver les éléments HTML. Notez que jusqu’à présent, les éléments n’ont pas encore été créés.

Il existe différentes manières de charger le JavaScript une fois que tout le contenu de la page Web est complètement affiché à l’écran. Vous trouverez ci-dessous quelques méthodes bien connues que vous pouvez suivre pour exécuter le code JavaScript une fois la page Web entièrement chargée.

Ajouter la balise script à la fin de la balise body en JavaScript

L’ajout d’une balise script à la fin de la balise body est une méthode courante de chargement du code JavaScript. Jusqu’à ce point, tout le contenu de la page Web s’affiche correctement à l’écran. Ainsi, nous pouvons facilement trouver ou faire référence à ces éléments HTML dans notre code JavaScript sans faire face à aucune erreur dans le processus.

Le programme suivant ci-dessous montre comment cela est fait.

<body>

    <script></script>
</body>

Utilisation de l’événement onload en JavaScript

Une autre façon d’exécuter le JavaScript après le chargement de la page est d’utiliser la méthode onload. La méthode onload attend que la page soit chargée. Dès qu’il le fait, ce processus exécute alors le code JavaScript.

Il existe deux manières d’écrire un code JavaScript. Une façon consiste à écrire le code JavaScript à l’intérieur de la balise script sous la balise body, puis à appeler la fonction à l’intérieur de la méthode onload. Vous pouvez également créer un fichier séparé pour écrire le code JavaScript, lier ce fichier dans votre code HTML à la fin de la balise body, puis appeler cette fonction dans la méthode onload.

Utilisez l’événement onload sur la balise body en JavaScript

La méthode onload nécessite une variable target. Dans ce cas, nous utiliserons la méthode onload sur la balise body pour que ce soit la target.

A l’intérieur de la méthode onload, il suffit de passer une fonction. Désormais, cette fonction ne s’exécutera qu’une fois que tout le contenu de la page Web sera entièrement chargé.

   <body onload="myFunction()">
     <h1>This is an example of onload.</h1>
     <script>
   
       function myFunction() {
         console.log("function called...");
       }
   
     </script>
   </body>

Production:

function called...

Dans la balise body, nous avons juste une balise h1 et une balise script. Dans la balise script, nous avons une fonction myFunction() qui affiche un message dans la fenêtre de console function called.... Pour exécuter cette fonction après le chargement de la page, il suffit de la passer à l’intérieur de la méthode onload.

Utilisez l’événement onload sur l’objet window dans un fichier JavaScript

Une autre façon d’utiliser la méthode onload est sur l’objet window. L’objet window représente la totalité de la fenêtre du navigateur. Une fois que les éléments à l’intérieur de la fenêtre du navigateur sont complètement exécutés, nous pouvons exécuter notre code JavaScript en utilisant la méthode onload.

<body>

  <h1>This is an example of onload.</h1>

  <script>
    window.onload = function () {
      console.log("function called...");
    }
  </script>
</body>

Ici, nous avons le même code que le précédent. La seule différence ici est que nous utilisons la méthode onload sur l’objet window, qui est maintenant la cible. Le programme finira par appeler la fonction et le message function called... s’affichera sur la fenêtre de la console.