Comment appeler une fonction JavaScript à la page Chargement

L'accès à diverses fonctionnalités lors du chargement de page est requis dans de nombreuses pages Web et sites Web pour garantir le fonctionnement de divers algorithmes implémentés. De plus, tout en effectuant des tests automatisés d'un site Web, cette fonctionnalité est très utile pour configurer le fonctionnement de diverses opérations dans une fonction et les déboguer.

Cet article démontrera les méthodes pour accéder à une fonction sur la charge de page en javascript.

Comment appeler / invoquer une fonction à la page Chargement en JavaScript?

Pour appeler une fonction JavaScript sur le chargement de la page, les approches suivantes peuvent être utilisées:

• "fenêtre.en charge" événement
• "document.addEventListener ()" méthode
• "Body Onload" événement

Nous allons maintenant discuter de chacune des approches mentionnées une par une!

Méthode 1: Invoquez une fonction JavaScript lors du chargement de la page à l'aide de la fenêtre.Événement Onload

Le "fenêtre.en charge»L'événement se produit lorsque la page entière avec son contenu charge. Plus précisément, cet événement peut être appliqué pour accéder à une fonction spécifique sur le chargement de la page.

Syntaxe

fenêtre.onload = function ()

Dans la syntaxe donnée, "fonction»Fait référence à la fonction qui est invoquée lorsque la fenêtre est chargée.

L'exemple suivant explique le concept discuté.

Exemple

Dans l'exemple suivant, initialisez les deux variables avec les valeurs entières données:

var charge1 = 6;
Var Load2 = 4;

Maintenant, définissez une fonction nommée «PageOnload ()»Et placez les variables créées comme son argument. Renvoyez également l'ajout des valeurs spécifiées par rapport aux variables:

Fonction PageOnload (Load1, Load2)
return Load1 + Load2;

Enfin, appliquez le «fenêtre.en charge»Événement tel que lorsque la page se charge, la fonction est accessible et la somme des valeurs est renvoyée:

fenêtre.onload = function ()
console.log ("La valeur résultante est:",)
console.log (pageOnload (Load1, Load2));

La sortie correspondante sera:

La sortie ci-dessus est le résultat de la page de téléchargement et des fonctions accessibles en même temps.

Méthode 2: Accédez à une fonction de chargement de page en javascript en utilisant

document.Méthode addEventListener ()

Le "document.addEventListener ()»La méthode fusionne un gestionnaire d'événements à un document. Cette méthode peut être implémentée pour ajouter l'événement spécifié pour charger la page et appeler une fonction particulière en retour.

Syntaxe

document.AddeventListener (événement, fonction)

Dans la syntaxe ci-dessus, "événement"Fait référence à un événement qui déclenchera et invoquera le" spécifié "fonction".

Regardez l'exemple suivant.

Exemple

Tout d'abord, attribuez l'ID spécifié nommé «charger«À l'élément div:

Ensuite, accédez au conteneur créé en passant son identifiant au «document.getElementByid ()" méthode:

Laisser charger = documenter.getElementById ("charge");

Après cela, ajoutez un événement nommé "DomContentélé" en utilisant le "document.addEventListener ()”Méthode afin de charger la page et d'accéder à la fonction PageOnload ():

document.AddEventListener ("DomContentloaded", PageOnload ());

Enfin, définissez une fonction nommée «PageOnload ()". Ici, affichez les messages suivants sur la boîte de dialogue d'alerte et sur le modèle d'objet de document (DOM) respectivement sur le chargement de la page:

fonction pageonload ()
alerte ("Appel de fonction sur le chargement de la page.");
charger.innerhtml = "corps de fonction exécuté avec succès sur chargement."

Sortir

Méthode 3: Appelez une fonction sur le chargement de la page en javascript à l'aide de l'événement Body Onload

Le "Body Onload»L'événement exécute la fonction spécifiée lorsque le processus de chargement de la page est terminé. Cette technique peut être appliquée pour accéder à plusieurs fonctions en les plaçant dans les arguments d'une fonction qui en résulte et en effectuant la fonctionnalité souhaitée sur le chargement de la page.

Syntaxe

Dans la syntaxe ci-dessus, "fonction()»Fait référence à la fonction qui sera appelée le chargement de la page.

L'exemple suivant clarifiera le concept.

Exemple

Tout d'abord, appliquez le «Body Onload«Redirection des événements vers la fonction spécifiée«exécuter()»:

Ensuite, définissez une fonction nommée «PageOnload1 ()”Qui renvoie une valeur:

fonction pageonload1 ()
retourner "3";

De même, définissez une fonction nommée «PageOnload2 ()»Et renvoyez la valeur spécifiée:

fonction pageonload2 ()
retourner "2";

Maintenant, définissez une fonction nommée «PageOnload ()«Avoir les fonctions définies ci-dessus comme ses arguments. Dans cette fonction, les deux valeurs renvoyées des fonctions accessibles seront multipliées et renvoyées:

Fonction PageOnload (PageOnload1, PageOnload2)
return PageOnload1 () * PageOnload2 ();

Enfin, la fonction définie «exécuter()"Accédera à la fonction"PageOnload ()»Et enregistrez ses fonctionnalités (multiplication des deux nombres):

fonction exécute ()
console.journal ("La valeur résultante est:")
console.journal (pageonload (pageOnload1, pageOnload2));

Sortir

Nous avons expliqué les méthodes pour appeler une fonction JavaScript sur le chargement de la page.

Conclusion

Pour appeler une fonction sur le chargement de la page à l'aide de JavaScript, appliquez le «fenêtre.en charge()”Événement Pour accéder à la fonction sur le chargement de la page, le«document.addEventListener ()”Méthode pour ajouter un événement particulier pour charger la page ou le"Body Onload”Événement pour fusionner les fonctionnalités des fonctions dans une seule fonction. Ce manuel a démontré les méthodes pour accéder à une fonction sur la charge de page en javascript.