Comment exécuter une fonction lorsque la page est chargée en javascript?
Cet article utilisera les méthodes suivantes pour réaliser la tâche à accomplir:
- Utilisation de l'événement Onload sur la variable d'interface Windows
- Mettre un attribut onload à l'intérieur de la balise
- Définition d'un écouteur d'événements personnalisé sur la variable d'interface de la fenêtre
- Utilisation du document.Attribut ONREADYSTATECHANGE
Commençons par le premier.
Méthode 1: Événement de charge de fenêtre
L'événement Onload () peut être utilisé avec n'importe quel élément d'une page HTML, et il effectuera les actions données à l'intérieur après que cet élément ait été entièrement chargé. Pour exécuter une fonction seulement après l'ensemble "fenêtre«A été chargé, utilisez la« fenêtre.propriété onload ”dans le fichier de script et définissez-le égal à une fonction comme
fenêtre.onload = function ()alert ("Page a été chargée");
;
Dans la fonction, une alerte est envoyée qui dit que "la page a été chargée". Exécutez la page Web HTML et observez les résultats suivants:
Il ressort clairement de la sortie que la fonction a été exécutée après que le navigateur ait complètement chargé la «fenêtre» de la page Web de la page Web.
Méthode 2: Utilisation de l'attribut Onload avec la balise corporelle
Comme la balise corporelle comprend toutes ces données affichées sur le navigateur Web, donc mettre un attribut Onload et le définir égal à une fonction dans cette balise signifierait essentiellement l'exécution de la fonction après que tout sur la page Web a été entièrement chargé.
Par exemple, créez une page Web HTML avec ces lignes:
alt = ""
/>
Comment exécuter une fonction lorsque la page est chargée en javascript ?
Ceci est un exemple d'attribut Body Onload
Le point clé ici est que dans le corps que nous avons utilisé l'attribut onLoad = "Entièrementcharged ()". Cela amènera la page Web à rechercher un «entièrement téléchargé ()”Fonction dans le script après tous les éléments de la page Web ont été chargés.
Dirigez-vous dans le fichier de script et ajoutez les lignes suivantes:
fonction entièrement chargeée ()alerte ("La page Web a été complètement chargée!");
Exécutez le HTML, et la sortie du navigateur ressemblera à ceci:
L'utilisateur est invité après l'étiquette corporelle, et tous les éléments à l'intérieur de la balise corporelle ont été entièrement chargés.
Méthode 3: Ajout d'un écouteur d'événements sur la variable d'interface «Window»
L'une des plus anciennes méthodes encore efficaces. Dans le fichier JavaScript, ajoutez simplement un écouteur d'événements à l'aide de l'opérateur de points avec notre "fenêtre»Variable d'interface. L'état à l'intérieur de l'auditeur de l'événement sera «charger»Et sur ce changement d'état, définissez une fonction à exécuter. Tout cela est réalisé en utilisant les lignes suivantes:
fenêtre.addEventListener ("Load", function ()alerte ("c'est chargé!");
);
Après cela, chargez simplement la page Web HTML dans le navigateur et observez la sortie suivante:
L'utilisateur est invité dès que la fenêtre est entièrement chargée. Cependant, notez que cette alerte apparaît lorsque le «fenêtre" est chargé. Cela signifie que l'utilisateur peut obtenir l'alerte avant que tous les éléments se chargent complètement.
Méthode 4: Utilisation de l'attribut onreadystatechange du document,
Dom a cet attribut appelé «onreadystatechange«Qui est excité chaque fois que l'état du document est modifié. Cela peut être utilisé pour exécuter une fonction, mais le seul problème est que cette variable ou cet attribut peut contenir différents états comme le chargement, l'attente, le traitement et. En effet, cet attribut est le plus utilisé pour les demandes XML ou HTML.
Un chèque doit être induit pour exécuter une fonction uniquement lorsque le document est entièrement chargé. Utilisez les lignes suivantes à l'intérieur du fichier JavaScript:
document.onReadyStateChange = function ()si (documenter.ReadyState == "complet")
alerte ("Yahoo!");
;
Dans l'extrait de code ci-dessus, un chèque a été placé pour rechercher un état spécifique «complet» seulement alors que l'utilisateur est alerté. Fixez la page Web HTML et observez la sortie:
L'utilisateur a été alerté après que l'état prêt du document a été «complet».
Conclure
Il existe plusieurs façons d'exécuter une fonction JavaScript dès que la page Web a complètement chargé. Pour démontrer cela, dans cet article, dans chaque méthode, vous avez utilisé un alerte Fonction Pour afficher une alerte représentant que la page Web a exécuté la fonction JavaScript après le chargement complet de cette page Web.