Exécuter le code JavaScript après le chargement de la page Web
-
Ajouter la balise
scriptà la fin de la balisebodyen JavaScript -
Utilisation de l’événement
onloaden JavaScript -
Utilisez l’événement
onloadsur la balisebodyen JavaScript -
Utilisez l’événement
onloadsur l’objetwindowdans 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.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn