web-dev-qa-db-fra.com

Chargement de javascript dans body onload avec 2 fonctions

J'essaie de charger 2 événements/fonctions javascript dans le corps onload comme suit: -

<body onLoad="getSubs(document.form1.HotelID.options[document.form1.HotelID.selectedIndex].value);getTags(document.form1.HotelID.options[document.form1.HotelID.selectedIndex].value);">

Chaque fois que je charge en utilisant 2 fonctions, la première s'interrompt - mais si je charge juste celle qui marche, ça fonctionne bien - est-ce que je fais quelque chose de mal, est-il impossible de mettre 2 fonctions dans la charge?

7
Paul Clubs

essaye ça:

<html>
<head>
<script language="javascript">
function func1(){
    //the code for your first onload here
    alert("func1");
}
function func2(){
    //the code for your second onload here
    alert("func2");
}
function func3(){
    //the code for your third onload here
    alert("func3");
}
function start(){
    func1();
    func2();
    func3();
}
</script>
</head>
<body onload="start()">
</body>
</html>

Multiple onload

12
Ashwini Verma

Faites-le simplement à partir d'un script Java, l'un des liens partagés dans un commentaire explique bien pourquoi il est préférable d'utiliser cette approche plutôt que des attributs intégrés.

<head>
<script>
document.body.onload = function() {
getSubs(...);
getTags(...);
};
</script>
</head>
<body>
...
</body>
8
GillesC

J'éviterais à tout prix d'avoir inline javascript, c'est ce que vous avez fait dans le code de votre question: ajoutez du javascript dans un attribut HTML.


La meilleure pratique consiste à ajouter votre javascript dans un fichier séparé, voir la question connexe sur ce principe Qu'est-ce que Javascript non intrusif en termes simples?

Donc, vous auriez un autre fichier appelé par exemple "myjsfile.js", puis vous le référencer depuis votre page HTML

<script src="./path/to/your/myjsfile.js"></script>

Voici la réponse à l'endroit où placer cette référence: Où placer Javascript dans un fichier HTML?

Votre fichier "myjsfile.js" aurait simplement:

window.onload =  function(){
    getSubs(...);
    getTags(...);
};

Une autre chose à éviter: ajoutez du javascript dans le même fichier HTML. La raison est également basée sur le même principe de unobstrusive javascript. Qu'est-ce que Javascript non intrusif en termes simples?

Mais je suppose que dans certains cas, vous voudrez peut-être faire cela.

Si vous en avez vraiment besoin, utilisez window.onload au lieu du code javascript en ligne onload="...", voyez pourquoi ici window.onload vs <body onload = "" />

Ajoutez simplement ce qui suit à votre fichier HTML:

<script type="text/javascript">
    window.onload =  function(){
        getSubs(...);
        getTags(...);
    };
</script>

Voici la réponse à l'endroit où placer ce code: Où placer Javascript dans un fichier HTML?

Remarque: Oui, au même endroit que l'endroit où vous mettriez la référence à un fichier javascript externe


Autre chose: je ne sais pas où sont définies vos fonctions getSubs() et getTags(). Mais si vous voulez que votre code fonctionne, il doit appeler ces fonctions une fois que le fichier (ou une partie de javascript) qui les définit a été chargé.

En bref: assurez-vous que le fichier javascript contenant les définitions de getSubs() et getTags() est référencé before votre code.

2
Adrien Be

Vous pouvez, par exemple, créer une nouvelle fonction JS qui accepte le paramètre document.form1.HotelID.options [document.form1.HotelID.selectedIndex] .value et appeler les deux fonctions dans la fonction nouvellement créée. 

J'ai essayé d'appeler deux fonctions en utilisant le code ci-dessous et cela a bien fonctionné pour moi.

<html>
    <body onload="callStart();callAgain();">
        <script type="text/javascript">
            function callStart() {
                alert('First');
            }
            function callAgain() {
                alert('Again');
            }
        </script>
    </body>
</html>
0
Krishna