2012-04-12 9 views
5

sto cercando di caricare 2 javascript eventi/funzioni nel corpo onload come segue: -Caricamento javascript in onload corpo con 2 funzioni

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

ogni volta che carico utilizzando 2 funzioni il primo interrompe - ma se mi basta caricare quello che funziona bene - sto facendo qualcosa di sbagliato è non possibile mettere 2 funzioni all'interno del onload?

+1

si dovrebbe davvero evitare gestori in linea. rendono il tuo codice irraggiungibile. Ad ogni modo apparentemente non hai errori di sintassi – fcalderan

+1

Vedi anche: [Perché il codice CSS e JavaScript in linea è una cosa così brutta] (http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code -is-come-a-bad-cosa /). Inoltre, l'accesso ai form direttamente come proprietà di 'document' non è standard. Accedervi come proprietà di 'document.forms' e gli elementi come proprietà della proprietà' elements' del modulo (ad es. 'Document.forms..elementi.HotelId') o direttamente tramite ID (ad esempio' document.getElementById ('HotelID')) ', supponendo che l'input denominato 'HotelID' abbia anche lo stesso ID). – outis

+0

Non sono sicuro se fa alcuna differenza ma le due funzioni eseguono una richiesta AJAX. –

risposta

0

Una cosa che si potrebbe fare è creare una nuova funzione JS che accetti il ​​parametro document.form1.HotelID.options [document.form1.HotelID.selectedIndex] .value e chiama le due funzioni nella funzione appena creata.

Ho provato a chiamare due funzioni che utilizzano il codice qui sotto e ha funzionato bene per me.

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

Questa è roba davvero brutta che stai facendo Qui. Vedi http://stackoverflow.com/questions/4478795/what-is-unobtrusive-javascript-in-layman-terms –

7

basta farlo da java script, invece, uno dei link condiviso in un commento spiega bene il motivo per cui è meglio usare questo approccio rispetto attributi in linea.

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

provare questo:

<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

1

Vorrei evitare a tutti i costi per avere inline javascript, questo è quello che hai fatto nel codice della tua domanda: aggiungere javascript all'interno di un attributo HTML.


Le migliori pratiche è quello di aggiungere il javascript in un file separato, consultare la relativa domanda su questo principio What is Unobtrusive Javascript in layman terms?

questo modo ci sono un altro file chiamato ad esempio "myjsfile.js", allora si fare riferimento a esso dalla pagina HTML

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

Ecco la risposta a dove posizionare questo riferimento: Where to place Javascript in a HTML file?

il tuo " myjsfile.js" file potrebbe semplicemente:

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

Un'altra cosa da evitare: aggiungere javascript all'interno dello stesso file HTML. Il motivo per cui si basa anche sullo stesso principio di unobstrusive javascript. What is Unobtrusive Javascript in layman terms?

Ma credo che ci sono casi in angolo in cui si consiglia di farlo.

Se avete davvero, non utilizzare per window.onload invece della linea javascript onload="...", capire perché qui window.onload vs <body onload=""/>

Basta aggiungere il seguente al file HTML:

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

Ecco la risposta a dove per inserire questo codice:

Nota: Sì, nello stesso posto in cui si inserire il riferimento a un file javascript esterno


Un'altra cosa: non so dove sono definiti i tuoi getSubs() e getTags() funzioni. Ma se vuoi che il tuo codice funzioni, devi chiamare queste funzioni dopo che il file (o parte di javascript) che li ha definiti è stato caricato.

In breve: assicurarsi che il file javascript che contiene le definizioni di getSubs() e getTags() viene fatto riferimento prima il codice.

Problemi correlati