window.onload()La méthode est utilisée pour exécuter une opération immédiatement après le chargement de la page web ; c'est-à-dire qu'une fois que le document HTML a fini de se charger, une méthode est exécutée immédiatement.

window.onload()Généralement utilisée sur l'élément <body> pour exécuter du code de script après le chargement complet de la page (y compris les images, les fichiers CSS, etc.).

Syntaxe lorsqu'il n'y a qu'une seule fonction à exécuter :

window.onload = funcRef;

La méthode funcRef sera appelée après que la page a fini de se charger.

Syntaxe lorsqu'il y a plusieurs fonctions à exécuter :

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

Une fois la page chargée, Func1, Func2 et Func3 seront exécutées dans l'ordre.

Pourquoi utiliser window.onload() ?

Parce que les méthodes de fonction JavaScript ne peuvent être utilisées qu'après le rendu complet du document HTML. Si le rendu n'est pas terminé, l'arbre DOM est incomplet à ce moment-là, donc appeler du code JavaScript peut entraîner une erreur "undefined".

Exemple

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Testez sans utiliser window.onload()</title> <style type="text/css"> #bg{ width:120px; height:120px; border:4px solid blue; } </style> <script type="text/javascript"> document.getElementById("bg").style.backgroundColor="#F00"; </script> </head> <body> <div id="bg"></div> </body> </html>

Essayez-le vous-même »

Dans l'exemple ci-dessus, l'effet que nous voulons obtenir est de définir la couleur d'arrière-plan du div sur #F90, mais cet effet n'a pas été obtenu car le code est exécuté séquentiellement. Lorsque l'exécution atteintdocument.getElementById("#bg").style.backgroundColor="#F00"l'objet div n'a pas encore été chargé, donc la couleur d'arrière-plan n'a pas été définie avec succès. Le message d'erreur est le suivant :

Nous pouvons ajouter window.onload et il s'exécutera normalement. Le code modifié est le suivant :

Exemple

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Tester avec window.onload()</title> <style type="text/css"> #bg{ width:120px; height:120px; border:4px solid blue; } </style> <script type="text/javascript"> window.onload=function(){ document.getElementById("bg").style.backgroundColor="#F00"; } </script> </head> <body> <div id="bg"></div> </body> </html>

Essayez-le vous-même »

L'événement window.onload associe une fonction de gestionnaire d'événement. Il associe une fonction anonyme, et bien sûr, vous pouvez aussi associer une fonction nommée. L'exemple de code est le suivant :

Exemple

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Utilisation de window.onload() pour associer une fonction spécifique</title> <script type="text/javascript">// Function Nameis example window.onload=function example(){ document.write(“Rookie Tutorial -- Learning is not only about technology, but also about dreams!!!"); }</script> </head> <body> </body> </html>

Essayez-le vous-même »

Exemple avec plusieurs fonctions à exécuter :

Exemple

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Utilisation de window.onload() pour exécuter plusieurs fonctions</title> <style type="text/css"> #bg{ width:100px; height:100px; border:2px solid blue; } </style> <script type="text/javascript"> window.onload=function(){ function example1(){ document.getElementById("bg").style.backgroundColor="#F00"; } function example2(){ document.getElementById("bg").style.width="200px"; document.getElementById("bg").style.height="200px"; } example1(); example2(); } </script> </head> <body> <div id="bg"></div> </body> </html>

Essayez-le vous-même »

La différence entre window.onload et jQuery ready()

window.onload = function () {};    // JavaScript 
$(document).ready(function () {}); // jQuery

Les deux méthodes ci-dessus exécutent des opérations DOM après le chargement complet du document HTML, mais elles présentent encore certaines différences, comme le montre la figure ci-dessous :