Comment exécuter une fonction lorsque la page est chargée?

246

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

J'ai un script qui s'exécute si je l'initialise dans le <body>, comme ceci:

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

Mais je veux l'exécuter sans le <body onload="codeAddress()">et j'ai essayé beaucoup de choses, par exemple ceci:

window.onload = codeAddress;

Mais ça ne fonctionne pas.

Alors, comment puis-je l'exécuter lorsque la page est chargée?

javascript html onload

— Claes Gustavsson
source

Courez-vous window.onload = codeAddressaprès avoir codeAddress()été défini? Si oui, cela devrait fonctionner. Êtes-vous sûr qu'il n'y a pas d'erreur ailleurs?

— Skilldrick

Cela n'a aucun sens. window.onload s'exécute après le chargement de la page et tout le javascript est disponible, de sorte que la fonction codeAddress () peut être déclarée n'importe où dans la page ou les fichiers js liés. Il n'a pas besoin de venir avant, sauf s'il a été appelé pendant le chargement de la page.

— Jared Farrish

@Jared Oui, c'est vrai. Jetez un œil à jsfiddle.net/HZHmc . Ça ne marche pas. Mais si vous déplacez le window.onload vers après la définition: jsfiddle.net/HZHmc/1 cela fonctionne.

— Skilldrick

Une déclaration de fonction est généralement hissée en haut de la portée, de sorte que la fonction peut être déclarée n'importe où dans une portée accessible.

— Russ Cam

4

tous les navigateurs populaires peuvent afficher des erreurs javascript - en obtenez-vous?

— Christoph

354

window.onload = codeAddress;devrait fonctionner - voici une démo et le code complet:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
    </head>
    <body>
    
    </body>
</html>

Développer l'extrait

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        
        </script>
    </head>
    <body onload="codeAddress();">
    
    </body>
</html>

Développer l'extrait

— Darin Dimitrov
source

3

Comme je l'ai dit dans ma réponse, il n'y a rien de mal avec le code tel que vu - la raison pour laquelle il ne fonctionne pas doit être une erreur dans le JS quelque part.

— Skilldrick

si vous mettez un paragraphe avec du texte dans le corps, il ne se chargera pas tant que vous n'aurez pas cliqué sur OK.

— FluorescentGreen5

Ce gestionnaire d'événements global est uniquement disponible dans Chrome. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…

— Dévoué le

177

Plutôt que d'utiliser jQuery ou window.onload, JavaScript natif a adopté d'excellentes fonctions depuis la sortie de jQuery. Tous les navigateurs modernes ont désormais leur propre fonction DOM ready sans utiliser de bibliothèque jQuery.

Je recommanderais ceci si vous utilisez du Javascript natif.

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);

— Spencer May
source

4

(question noob: qu'est-ce que ça falsefait?)

— ᔕᖺᘎᕊ

7

@ ᔕᖺᘎᕊ pour la propriété 'bulles' (que vous n'avez pas à inclure, je remplis juste tous les booléens pour une bonne habitude). Il existe également une autre instruction booléenne pour la propriété 'cancelable', mais elle n'est pas très utile car l'instruction ci-dessus est déjà non annulable. En savoir plus à ce sujet ici: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— Spencer

1

C'est ce que je cherchais en ce moment :) S'exécute lorsque le DOM est terminé, vous pouvez donc le manipuler, pas lorsque le navigateur dit "page complètement chargée", ce qui peut prendre plusieurs secondes, basé sur des éléments externes (tels que des publicités)

— Nathanyel

1

@ x-yuri "L'événement DOMContentLoaded est déclenché lorsque le document a été entièrement chargé et analysé, sans attendre la fin du chargement des feuilles de style, des images et des sous-trames (l'événement de chargement peut être utilisé pour détecter une page entièrement chargée)." - stackoverflow.com/questions/2414750/…

— Spencer

1

window.onloadne peut être réglé qu'une seule fois. Si vous souhaitez exécuter deux fonctions en charge avec window.onload, la seconde remplacera la première.

— Yay295

46

Prenant la réponse de Darin mais le style jQuery. (Je sais que l'utilisateur a demandé javascript).

violon courant

$(document).ready ( function(){
   alert('ok');
});

— Manger chez Joes
source

4

Votre réponse m'a appris attribuer, mais pas sur jQuery / javascript.

— unicorn2

2

@VijayKumar c'est jQuery, pas Javascript natif donc vous avez besoin d'une bibliothèque jQuery incluse pour que cela fonctionne

— Spencer

30

Solution alternative. Je préfère cela pour la brièveté et la simplicité du code.

(function () {
    alert("I am here");
})();

Il s'agit d'une fonction anonyme, où le nom n'est pas spécifié. Ce qui se passe ici, c'est que la fonction est définie et exécutée ensemble. Ajoutez-le au début ou à la fin du corps, selon qu'il doit être exécuté avant le chargement de la page ou peu de temps après le chargement de tous les éléments HTML.

— Habeeb
source

1

C'est le seul code qui fonctionne avec l'aperçu HTML pour GitHub: htmlpreview.github.io Un autre code, bien que correct, est ruiné par cet aperçu HTML.

— Jason Doucette

2

Quelqu'un peut-il expliquer en quoi cela est différent de mettre les balises de script à la fin de la page HTML et le but de la fonction anonyme?

— Pat-Laugh

10

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

Cela fonctionnera probablement, mais cela interrompra également toutes les autres fonctions déjà liées à cet événement. Ou, si une autre fonction se connecte à cet événement après le vôtre, elle cassera le vôtre. Donc, vous pouvez passer de nombreuses heures plus tard à essayer de comprendre pourquoi quelque chose qui ne fonctionnait plus.

Une réponse plus robuste ici:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

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

function my_function() {
    // whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}

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

— Volonté
source

merci d'avoir fourni des informations supplémentaires sur l' onloadutilisation

— CybeX

4

Essayez readystatechange

document.addEventListener('readystatechange', () => {    
  if (document.readyState == 'complete') codeAddress();
});

où les états sont:

chargement - le document est en cours de chargement (pas d'extrait renvoyé)
interactif - le document est analysé, déclenché avantDOMContentLoaded
terminé - le document et les ressources sont chargés, déclenchés avantwindow.onload

Afficher l'extrait de code

<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += `DOMContentLoaded (timestamp: ${Date.now()})</br>`;
  });
  
  window.onload = () => {
    mydiv.innerHTML += `window.onload (timestamp: ${Date.now()}) </br>` ;
  } ;

  document.addEventListener('readystatechange', () => {
    mydiv.innerHTML += `ReadyState: ${document.readyState}  (timestamp: ${Date.now()})</br>`;
    
    if (document.readyState == 'complete') codeAddress();
  });

  function codeAddress() {
    mydiv.style.color = 'red';
  }
</script>

<div id='mydiv'></div>

Développer l'extrait

— Kamil Kiełczewski
source

3

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

Exemple d'utilisation

// add reference to domReady script or place 
// contents of script before here

function codeAddress() {

}

domReady(codeAddress);

— Russ Cam
source

0

window.onload fonctionnera comme ceci:

function codeAddress() {
	document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;

<!DOCTYPE html>
<html>
<head>
	<title>learning java script</title>
	<script src="custom.js"></script>
</head>
<body>
	<p id="test"></p>
	<li>abcd</li>
</body>
</html>

Développer l'extrait

— Rudra
source