Exécution de plusieurs fonctions dans onload. Exécuter plusieurs fonctions dans onload Comment appeler la fonction de chargement de page



appuyer sur le bouton lors du chargement de la page (4)

Je souhaite exécuter une fonction lorsque la page est chargée, mais je ne veux pas l'utiliser dans .

J'ai un script qui s'exécute si je l'initialise dans , par exemple :

Fonction codeAddress() ( // code )

Mais je veux l'exécuter sans et j'ai essayé beaucoup de choses, par exemple :

Window.onload = codeAddress;

Mais ça ne marche pas.

Alors, comment puis-je le déclencher au chargement de la page ?

window.onload = function() ( ... etc. n'est pas une bonne réponse.

Cela fonctionnera probablement, mais cela brisera également toutes les autres fonctions déjà liées à cet événement. Ou si une autre fonction détecte cet événement après le vôtre, elle sera interrompue. Ainsi, vous pouvez passer plusieurs heures plus tard à essayer de comprendre pourquoi quelque chose qui a fonctionné n’existe plus.

Une réponse plus fiable ici :

If(window.attachEvent) ( window.attachEvent("onload", votreNomFonction); ) else ( if(window.onload) ( var curronload = window.onload; var newonload = function(evt) ( curronload(evt); votreNomFonction( evt); window.onload = newonload else(window.onload = votreNomFonction; ))

Un code que j'ai utilisé, j'ai oublié où je l'ai trouvé pour donner du crédit à l'auteur.

Function my_function() ( // quel que soit le code que je souhaite exécuter après le chargement de la page ) if (window.attachEvent) (window.attachEvent("onload", my_function);) else if (window.addEventListener) (window.addEventListener("load ", ma_fonction, false);) else (document.addEventListener("load", ma_fonction, false);)

J'espère que cela t'aides :)

Au lieu d'utiliser jQuery ou window.onload, JavaScript natif a adopté des fonctionnalités intéressantes depuis la sortie de jQuery. Tous les navigateurs modernes disposent désormais de leur propre fonction DOM ready sans utiliser la bibliothèque jQuery.

Document.addEventListener("DOMContentLoaded", function() ( alert("Ready!"); ), false);

window.onload = codeAddress; devrait fonctionner - et le code complet est :

Test de la fonction codeAddress() ( alert("ok"); ) window.onload = codeAddress;

Test de la fonction codeAddress() ( alert("ok"); )

Jetez un œil au script domReady, qui vous permet de configurer plusieurs fonctions à exécuter lorsque le DOM est chargé. C'est essentiellement ce que Dom est prêt à faire dans de nombreuses bibliothèques JavaScript populaires, mais il est léger et peut être adopté et ajouté au début de votre fichier de script externe.

Exemple d'utilisation

// ajoute une référence au script domReady ou place // le contenu du script avant ici function codeAddress() ( ) domReady(codeAddress);

Si vous connaissez déjà plus ou moins JavaScript, vous avez probablement entendu parler du gestionnaire d'événements Load, appelé onload. Cet événement est déclenché directement lorsque la page est chargée. Et très souvent, lors du chargement de la page, certaines fonctions doivent être exécutées. Mais que se passe-t-il si vous devez exécuter plusieurs fonctions JavaScript ? En fait, cette question a été posée par l'un des utilisateurs du site. Par conséquent, j'écrirai sur le lancement de plusieurs fonctions dans onload dans cet article.

La solution est vraiment triviale, il suffit de lancer une fonction dans laquelle toutes les autres fonctions nécessaires sont lancées :



fonction a() (
b()
c();
}
fonction b() (
alert("Fonction b() démarrée");
}
fonction c() (
alert("Fonction c() démarrée");
}



Si vous ouvrez cette page (il n'y a pas d'éléments aussi importants que la balise html ou, par exemple, le titre et l'encodage de la page, afin de simplifier la compréhension du code), vous verrez comment les b() et c () les fonctions fonctionnent lors du chargement de la page.

Aujourd'hui, je veux parler d'un problème qui survient souvent chez les personnes qui commencent à apprendre Javascript.

Ils essaient d'interagir avec les éléments HTML de la page qui se trouvent plus bas dans le code que le script lui-même. En conséquence, le script a déjà été chargé, mais l'élément avec lequel vous devrez interagir ne l'est pas encore. Pour cette raison, rien ne fonctionnera.

La particularité du langage Javascript est que son code est exécuté de manière séquentielle, ligne par ligne, tel qu'il est écrit dans le code source.

Voici un exemple :

Document sans titre

La règle CSS (background-color:jaune) ne sera pas appliquée à l'élément avec l'identifiant #block, car doubler

$("#block").css("background-color", "jaune");

Sera exécuté avant le chargement de la ligne html :

Que se passe-t-il si nous devons exécuter du code ou une fonction uniquement après le chargement complet du document ?

Je veux parler de trois façons de procéder.

1 façon. Utilisation de la bibliothèque Jquery.

Le plus souvent je l'utilise moi-même, c'est la solution la plus simple et la plus pratique, mais elle nécessite de connecter la bibliothèque Jquery.

Voici comment le code précédent sera transformé si nous utilisons la méthode suivante.

#block (largeur : 100 px ; hauteur : 100 px ; bordure : 1 px solide #ccc ;) $(document).ready (function())( $("#block").css("background-color", "jaune" ) ; )); Document sans titre

Méthode 2. Utilisation de l'élément body et de l'attribut onload.

#block (width:100px; height:100px; border:1px solid #ccc;) function funonload() ( $("#block").css("background-color", "jaune"); ) Document sans titre

3 voies. Utilisation de l'objet window et de sa propriété onload.

#block (largeur:100px; hauteur:100px; bordure:1px solide #ccc;) function funonload() ( $("#block").css("background-color", "jaune"); ) window.onload = chargement amusant ; Document sans titre

Choisissez la méthode la mieux adaptée à votre situation et mettez-la en pratique.



 

Il pourrait être utile de lire :