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

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

J'ai un script qui s'exécute si je l'initialiser 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, comme par exemple ce:

window.onload = codeAddress;

Mais ça ne fonctionne pas.

Alors, comment puis-je exécuter au chargement de la page?

Exécutez-vous window.onload = codeAddress après codeAddress() est-elle définie? Si oui, cela devrait fonctionner. Êtes-vous sûr qu'il n'est pas une erreur d'ailleurs?
Cela n'a aucun sens. de la fenêtre.onload s'exécute après le chargement de la page et tous les javascript est disponible, de sorte que le codeAddress() la fonction peut être déclarée n'importe où dans la page, ou lié js fichiers. Il n'a pas à venir avant que s'il est appelé pendant le chargement de la page elle-même.
Oui, c'est fait. Jetez un oeil à jsfiddle.net/HZHmc. Il ne fonctionne pas. Mais si vous déplacez la fenêtre.onload d'après la définition: jsfiddle.net/HZHmc/1 il ne fonctionne pas.
Une déclaration de fonction est généralement hissé au-dessus de la portée, de sorte que la fonction peut être déclarée nulle part, en un lieu accessible à la portée.
En fait, hmm. Si la fonction est déclarée dans la balise head, puis la fenêtre.onload fonctionne très bien. Cependant, si la fonction est déclarée plus tard (par exemple, la balise "body"), alors il ne sera pas. Mes excuses, bien que j'ai été partiellement correcte. Si le codeAddress fonction n'est pas déclarée dans la tête, alors que pourrait être le problème.
dans votre premier exame, il ne fonctionne pas parce que c'est une expression de fonction qui n'est pas levé. Changer pour une déclaration de fonction (la fonction func() {}) et cela fonctionne.
Merci de poster votre code complet. Comme Darin et je l'ai dit (ignorer les autres), cela devrait fonctionner. Il doit y avoir une erreur d'ailleurs si ça ne fonctionne pas.
Oui, je suis conscient de cela, je viens de prouver le point "de la fenêtre.onload s'exécute après le chargement de la page et tous les javascript est disponible, de sorte que le codeAddress() la fonction peut être déclarée n'importe où dans la page, ou lié js fichiers." n'est pas vrai.
Voir ma deuxième remarque. J'ai testé de mettre la fenêtre.onload dans une balise script dans la balise head, et placé à l'avant de la fonction qu'il appelait. Il a bien fonctionné. Il n'était pas jusqu'à ce que je l'ai mis plus bas dans le corps que j'ai constaté qu'il ne fonctionnait pas. Je me suis trompé sur cette note, mais je ne pense toujours pas que la réponse ci-dessus est complètement droit.
tous les navigateurs populaires peut afficher les erreurs javascript - avez-vous un?

InformationsquelleAutor Claes Gustavsson | 2011-01-30

323

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

HTML:

<!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>

HTML:

<!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>

Comme je l'ai dit dans ma réponse, il n'y a rien de mal avec le code vu - la raison qu'il ne fonctionne pas doit être une erreur dans le JS quelque part.
si vous mettez un paragraphe avec du texte dans le corps, il ne se charge pas jusqu'à ce que vous cliquez sur ok.
Ce gestionnaire d'événement global n'est disponible dans le Chrome. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/...

InformationsquelleAutor Darin Dimitrov

147

Plutôt que d'utiliser jQuery ou d'une fenêtre.onload, JavaScript natif a adopté certaines fonctions depuis la version de jQuery. Tous les navigateurs modernes ont maintenant leurs propres DOM prêt à fonctionner sans l'utilisation d'une bibliothèque jQuery.

Je le recommande si vous utilisez Javascript natif.
```
document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);
```
- (question de noob: quel est le false faire?)
- pour les "bulles" de propriété (que vous n'avez pas à comprendre, je viens de remplir tous les booléens pour une bonne habitude). Il y a aussi un autre boolean instruction pour "annulable" la propriété, mais il n'est pas très utile puisque la déclaration ci-dessus est déjà de l'onu ne peuvent être annulées. Lire plus à ce sujet ici: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
- C'est ce que je cherchais en ce moment 🙂 Exécute lorsque le DOM est terminée, de sorte que vous pouvez le manipuler, et non pas lorsque le navigateur dit "à la page complètement chargée", ce qui peut prendre plusieurs secondes en fonction des éléments (tels que des publicités)
- Légèrement question de noob, si vous ne savez pas si la page est chargée ou pas? Edit: Ah: document.readyState
- Quel est le problème avec window.onload?
- DOMContentLoaded événement est déclenché lorsque le document a été complètement chargé et analysée, sans attendre que les feuilles de style, des images et des adaptations à la fin du chargement (la charge de l'événement peut être utilisé pour détecter une page chargée)." - stackoverflow.com/questions/2414750/...
- Cela ne répond pas à ma question. C'est juste une question de ce que vous avez besoin.
- ah, je comprends maintenant, la question...la réponse est, elle n'est pas window.onload
- window.onload ne peut être définie qu'une seule fois. Si vous souhaitez exécuter deux fonctions à la charge avec window.onload, la seconde pour remplacer la première.
InformationsquelleAutor Spencer May
40

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

l'exécution de violon
```
$(document).ready ( function(){
   alert('ok');
});
```
- Votre réponse m'a appris attribuer, mais pas à propos de jQuery / javascript.
- salut Manger au Joes, sa ne fonctionne pas
- c'est jQuery, pas de Javascript natif de sorte que vous besoin d'une bibliothèque jQuery inclus pour que cela fonctionne
InformationsquelleAutor Eat at Joes
18

De solutions de rechange. Je préfère ce pour la brièveté et la simplicité du code.
```
(function () {
    alert("I am here");
})();
```
C'est une fonction anonyme, d'où le nom n'est pas spécifié.
Ce qui se passe ici est que, la fonction est définie et exécutée ensemble.
Ajoutez à cela le début ou la fin du corps, en fonction de si c'est pour être exécuté avant le chargement de la page, ou peu après, tous les éléments HTML sont chargés.
- merci pour le partage une alternative
- C'est le seul code qui fonctionne avec Aperçu HTML pour GitHub: htmlpreview.github.io un Autre code, bien que correct, est ruiné par cet Aperçu HTML.
InformationsquelleAutor Habeeb

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

Il en sera probablement de travail, mais aussi de casser tout les autres fonctions déjà accrocher à cet événement. Ou, si une autre fonction crochets dans ce cas après le vôtre, il va se casser la vôtre.
Ainsi, vous pouvez passer beaucoup d'heures plus tard, en essayant de comprendre pourquoi quelque chose n'est pas plus.

Une plus forte réponse 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 peu de code que je l'utilise, j'ai oublié où je l'ai trouvé à donner à l'auteur de crédit.

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);}

Espère que cela aide 🙂

merci de fournir des informations supplémentaires sur le onload utilisation

InformationsquelleAutor Will

3

Prendre un coup d'oeil à la domReady script qui permet la mise en place de multiples fonctions à exécuter lorsque le DOM est chargé. C'est fondamentalement ce que le Dom prêt dans de nombreux populaire, les bibliothèques JavaScript, 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);
```
InformationsquelleAutor Russ Cam

fenêtre.onload fonctionne comme ceci:

JS:

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

HTML:

<!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>

InformationsquelleAutor Rudra

Essayer readystatechange

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

où les états sont les suivants:

chargement - le document est en cours de chargement (pas tiré dans l'extrait de code)
interactive - le document est analysé, tiré avant DOMContentLoaded
complète - le document et les ressources qui sont chargés, tiré avant window.onload

HTML:

<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += 'DOMContentLoaded' + '</br>';
  });
  
  window.onload = () => {
    mydiv.innerHTML += 'window.onload' + '</br>';
  } ;

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

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

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

InformationsquelleAutor Kamil Kiełczewski

-1

Si vous voulez exécuter une fonction lorsque le corps de la charge. Au lieu de donner un attribut onload de la balise body, vous pouvez faire comme ceci.

JS:

//define the body
var body = document.getElementsByTagName("body")[0];
    //or
    //var body = document.querySelector("body");
    //or 
    //var body = document.querySelectorAll("body")[0];
    
    
      function codeAddress() {
      //your function
        alert("Hello World");
    }
    
    body.onload = function() {
       codeAddress();
    };

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>learning java script</title> 
</head>
<body>
	<h1>Sample Heading</h1>
  <p>Sample text</p>
</body>
</html>

Qui fait un pied de bas, quel est le problème?

InformationsquelleAutor designdust

Vous devez vous connecter pour publier un commentaire.