web-dev-qa-db-fra.com

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

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

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 la <body onLoad="codeAddress()"> et j'ai essayé beaucoup de choses, par exemple. ce:

window.onload = codeAddress;

Mais ça ne fonctionne pas.

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

javascripthtmlonload
192
Claes Gustavsson

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>

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

310
Darin Dimitrov

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

Je le recommanderais si vous utilisez du Javascript natif.

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

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

violon en cours d'exécution

$(document).ready ( function(){
   alert('ok');
});​
36
Eat at Joes

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

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

Ceci est 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 ceci au début ou à la fin du corps, selon si être exécuté avant de charger la page ou peu de temps après le chargement de tous les éléments HTML.

14
Habeeb

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

Cela fonctionnera probablement, mais toutes les autres fonctions déjà associées à cet événement seront également supprimées. Ou, si une autre fonction est associée à cet événement après le vôtre, le vôtre sera cassé. Donc, vous pouvez passer des heures plus tard à essayer de comprendre pourquoi quelque chose qui fonctionnait 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;
    }
}

Certains codes que j'ai utilisés, j'oublie où je les ai trouvés pour donner 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 :)

7
Will

Examinez le script domReady qui permet de configurer plusieurs fonctions à exécuter lorsque le DOM est chargé. C'est en gros ce que fait le logiciel 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);
3
Russ Cam

Essayez readystatechange

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

où les états sont:

  • loading - le document est en cours de chargement (pas d'extrait de code)
  • interactive - le document est analysé, déclenché avant DOMContentLoaded
  • complete - le document et les ressources sont chargés, déclenchés avant le window.onload
<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>
0
Kamil Kiełczewski

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>

0
Rudra