JavaScript Window Onload Function Call

Muhammad Muzammil Hussain 30 janvier 2023
  1. Utilisation de la fonctionnalité window.onload avec exemple en HTML
  2. Examiner le code HTML donné en quelques étapes
  3. Autre façon de voir les mêmes résultats
JavaScript Window Onload Function Call

Cet article explique le but de la méthode window.onload en JavaScript par un exemple. La fonction window.onload s’exécute pour effectuer une tâche une fois que la page du navigateur a fini de se charger.

Utilisation de la fonctionnalité window.onload avec exemple en HTML

La méthode window.onload est déclenchée lorsque la page est entièrement chargée sur le navigateur (ainsi que toutes les images, style, scripts et CDN). Vous pouvez voir ici un exemple de code source de page HTML qui utilise la méthode window.onload pour l’exécution automatique afin d’afficher une boîte d’alerte.

<html>
<head>
<title>(Window.onload function in HTML)</title>
<script type="text/javascript">

function code(){
alert(" Alert inside code function Window.onload");
}

window.onload=code();
</script>

</head>
<body>

<h1> Graphic Designer Firm </h1>
    <p1> A craft of creating visual content to communicate messages.</p1>
</br> <img src = "Graphic-Design.png" height="500px" width="500px" >

</br> <hr width="800">
</body>
</html>

Dans la source de la page HTML ci-dessus, vous pouvez voir la balise <script type="text/javascript"> qui utilise JavaScript dans doctype html. Dans l’étape suivante, function code() est déclaré à l’intérieur de la balise <script>.

La function code() s’appelle window.onload. Il affiche une boîte de dialogue d’alerte par défaut lorsqu’une page Web se charge complètement d’images et de contenu textuel.

Examiner le code HTML donné en quelques étapes

Suivez ces quatre étapes simples et obtenez une compréhension claire de la méthode window.onload.

  • Créer un document texte. Vous pouvez utiliser le bloc-notes ou tout autre outil d’édition de texte.
  • Collez le code donné dans le fichier texte créé.
  • Enregistrez ce fichier texte avec l’extension .html et ouvrez-le avec n’importe quel navigateur par défaut.
  • Vous pouvez voir une boîte d’alerte qui apparaît juste après le chargement complet de la page.

Autre façon de voir les mêmes résultats

Vous pouvez obtenir les résultats du message d’alerte en utilisant un événement onload alternatif via une balise body. Voici un exemple de balise body qui utilise l’exécution automatique pour appeler un code de fonction contenant une boîte d’alerte :

<script type="text/javascript">

function code(){
alert(" Alert inside code function");
}
</script>

<body onLoad="code()";>

Dans les deux exemples, onLoad de la balise body et window.onload ont la même fonctionnalité pour exécuter les instructions après avoir terminé le chargement de la page.