Comment appeler une fonction JavaScript lors du chargement de la page?

244

Traditionnellement, pour appeler une fonction JavaScript une fois la page chargée, vous ajoutiez un onloadattribut au corps contenant un peu de JavaScript (généralement en appelant uniquement une fonction)

<body onload="foo()">

Une fois la page chargée, je souhaite exécuter du code JavaScript pour remplir dynamiquement des parties de la page avec les données du serveur. Je ne peux pas utiliser l' onloadattribut car j'utilise des fragments JSP, qui n'ont aucun bodyélément 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.

javascript onload

— palAlaa
source

15

btw: c'est Javascript; Java étant un langage et Javascript un autre. Le script Java n'existe pas. FYI

— Yanick Rochon

Pouvez-vous soit vérifier que la modification de Kevin à votre question pose toujours la même question, soit la reformuler pour nous assurer que nous comprenons? (Essayez-vous de trouver une alternative à la surcharge?)

— STW

388

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, lorsqu'elle est invoquée, exécutera la fonction souhaitée, quels que soient les paramètres que vous lui attribuez. Et, bien sûr, vous pouvez exécuter plusieurs fonctions à l'intérieur de la fonction anonyme.

— Matt Sieker
source

Et maintenant, lorsque j'inclus dynamiquement une page générée par le serveur et que j'ai besoin d'être prêt pour DOM, je dois traverser ce champ de mines. Si seulement quelqu'un aurait encouragé correctement l'utilisateur de la bibliothèque plus tôt.

— Stefan Kendall

4

Je n'ai pas dit que c'était une bonne idée. Bien que le développeur principal où je travaille présente un cas fort de syndrome de Not Invented Here, et je n'ai pas réussi à le convaincre d'utiliser jquery, en dehors de quelques pages.

— Matt Sieker

2

Alors peut-être que vous devriez changer d'emploi. Si le bon outil pour le travail n'est pas l'outil que vous utilisez, pourquoi vous battre la tête contre le mur en combattant constamment les incompétents?

— Stefan Kendall

Et puis-je appeler la même fonction votre deuxième fois en utilisant l'événement onclick sur le bouton?

— Faizan

73

Une autre façon de le faire est d'utiliser des écouteurs d'événements, 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 pourrait également avoir été "clic", "focus" ...

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

— Ahmed Jolani
source

5

Notez que cela ne fonctionnera pas dans IE 8 et inférieur. Sinon, c'est la meilleure solution JS pure!

— Philipp

46

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

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

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

Vous pouvez également placer votre javascript à la toute fin du corps; il ne démarrera pas tant que le document n'est pas terminé.

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

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

// jQuery
$(document).ready( function () {
  SomeFunction();
});

— STW
source

Le javascript:dans le onloadest inutile, mais pas nocif.

— icktoofay

@STW <script type="text/javascript">LoadResult();</script>donneUncaught ReferenceError: LoadResult is not defined

— Gunasegar

37

function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

Ou avec jQuery si vous voulez:

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

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

Utilisation de plusieurs fonctions de chargement JavaScript

— Sarfraz
source

3

Ce n'est pas correct, la fonction s'exécutera et affectera tout ce qu'elle retourne à onload. Le () ne devrait pas être là.

— epascarello

1

S'il y a d'autres fonctions qui écoutent l'événement onload, cela les emportera. Mieux vaut ajouter un écouteur d'événements plutôt que d'affecter directement un gestionnaire d'événements. Même dans ce cas, vous l'affecteriez en tant que `window.onload = yourfunction 'sans la fermeture de la fonction, pas de la façon dont vous l'avez. Votre chemin cherche à exécuter votre fonction () au moment de l'affectation.

— Robusto

qui affectera la valeur de retour de la fonction à window.onload, qui ne fonctionnera pas, sauf si la valeur de retour est une fonction.

— I.devries

@epascarello: Bonne capture, corrigé, vous voyez une habitude lors de l'écriture des noms de fonction. Merci

— Sarfraz

1

window.onload = votrefonction; Le problème avec cette méthode est qu'elle n'accepte pas les paramètres de fonction !!

— palAlaa

8

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

— anonyme
source

3

Je pense que sa réponse est claire, comme vous pouvez le voir, le script est placé dans la balise head, ce qui permet de l'exécuter avant le contenu du corps .. ou disons précharger ses fonctions ou autre chose ... parfois une personne pose des questions parce qu'il ne ' Je ne sais pas du tout, mais ce n'est jamais le cas où quelqu'un vous nourrira à la cuillère, ni personne dans cette communauté, vous devez rechercher vous-même un peu plus. # particular_that_you're_a_web_developer

— M03

8

Vous devez appeler la fonction que vous souhaitez appeler lors du 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 l'événement function on load du document. Veuillez consulter 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>

— Amir Md Amiruzzaman
source

6

voici l'astuce (fonctionne partout):

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

— Abhishek
source

1

Pour détecter le html chargé (à partir du serveur) inséré dans l'utilisation DOM MutationObserverou détecter le moment dans votre fonction loadContent lorsque les données sont prêtes à être utilisées

Afficher l'extrait de code

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>

Développer l'extrait

— Kamil Kiełczewski
source