web-dev-qa-db-fra.com

Comment appeler une fonction JavaScript au chargement de la page?

Traditionnellement, pour appeler une fonction JavaScript une fois la page chargée, vous ajoutiez un attribut onload au corps contenant un peu de JavaScript (généralement, une fonction seulement).

<body onload="foo()">

Une fois la page chargée, je souhaite exécuter du code JavaScript pour renseigner de manière dynamique des parties de la page avec les données du serveur. Je ne peux pas utiliser l'attribut onload car j'utilise des fragments JSP, qui ne comportent pas d'élément body auquel je peux ajouter un attribut.

Existe-t-il un autre moyen d'appeler une fonction JavaScript lors du chargement? Je préfère ne pas utiliser jQuery car je ne le connais pas très bien.

javascriptonload
204
palAlaa

Si vous voulez que la méthode onload prenne des paramètres, vous pouvez faire quelque chose de similaire à ceci:

window.onload = function() {
  yourFunction(param1, param2);
};

Cela lie onload à une fonction anonyme qui, une fois appelée, exécutera la fonction souhaitée, avec les paramètres que vous lui avez attribués. Et, bien sûr, vous pouvez exécuter plusieurs fonctions à partir de la fonction anonyme.

332
Matt Sieker

Une autre façon de faire est d'utiliser des écouteurs d'événement, voici comment vous les utilisez:

document.addEventListener("DOMContentLoaded", function() {
  you_function(...);
});

Explication:

DOMContentLoaded Cela signifie que lorsque les objets DOM du document sont entièrement chargés et vus par JavaScript, cela aurait également pu être "clic", "focus" ...

function () Fonction anonyme, sera appelée lorsque l'événement se produira.

59
Ahmed Jolani

Votre question initiale n'était pas claire, en supposant que l'édition/interprétation de Kevin soit correcte, cette première option ne s'applique pas

Les options typiques utilisent l'événement onload:

<body onload="javascript:SomeFunction()">
....

Vous pouvez également placer votre javascript à la toute fin du corps; son exécution ne commencera que lorsque la doc sera terminée.

<body>
  ...
  <script type="text/javascript">
    SomeFunction();
  </script>
</body>

Et, une autre option est d’envisager d’utiliser un framework JS qui le fait intrinsèquement:

// jQuery
$(document).ready( function () {
  SomeFunction();
});
37
STW
function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

Ou avec jQuery si vous voulez:

$(function(){
   yourfunction();
});

Si vous souhaitez appeler plusieurs fonctions lors du chargement de la page, consultez cet article pour plus d'informations:

34
Sarfraz

Vous devez appeler la fonction que vous voulez appeler au chargement (c’est-à-dire le chargement du document/de la page). Par exemple, la fonction que vous souhaitez charger lors du chargement d'un document ou d'une page s'appelle "votreFonction". Cela peut être fait en appelant la fonction event on load du document. S'il vous plaît voir le code ci-dessous pour plus de détails.

Essayez le code ci-dessous:

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        yourFunction();
    });
    function yourFunction(){
      //some code
    }
</script>
7
Amir Md Amiruzzaman

voici le truc (fonctionne partout):

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
6
Abhishek
<!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>
6
anonymous

Pour détecter le code HTML chargé (du serveur) inséré dans le DOM, utilisez MutationObserver ou détectez le moment dans votre fonction loadContent lorsque les données sont prêtes à être utilisées.

let ignoreFirstChange = 0;
let observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirstChange++ > 0) console.log('Element added on', new Date());
}
)).observe(content, {childList: true, subtree:true });


// TEST: simulate element loading
let tmp=1;
function loadContent(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadContent('Senna');
loadContent('Anna');
loadContent('John');
<div id="content"><div>
1
Kamil Kiełczewski