2009-12-08 6 views
1

Je vais avoir quelques problèmes avec l'ordre de javascript exécution dans la page suivante:Commande de javascript exécution (en ligne et externe), IE vs Firefox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 

<script type="text/javascript"> 
    var blah = 0; 

    function scriptDoneRunning() 
    { 
     alert(blah); 
    } 

    function addExternalScript(src, parentNode) 
    { 
     var sc = document.createElement('script'); 
     sc.setAttribute('type', 'text/javascript'); 
     sc.setAttribute('src', src); 
     parentNode.appendChild(sc); 
    } 

    function addEndingScript(parentNode) 
    { 
     var theDiv = document.createElement('div'); 
     var sc = document.createElement('script'); 
     sc.setAttribute('type', 'text/javascript'); 
     sc.text = "scriptDoneRunning();"; 
     theDiv.appendChild(sc); 
     parentNode.appendChild(theDiv); 
    } 
</script> 
</head> 

<body> 
<div id="theparent"> 
    &nbsp; 
</div> 

<script type="text/javascript"> 
    addExternalScript("blah.js", document.getElementById("theparent")); 
    addEndingScript(document.getElementById("theparent")); 
</script> 
</body> 
</html> 

Et le fichier blah.js ressemble à ceci ....

blah=3; 

Essentiellement le code appelle "addExternalScript()" qui ajoute un élément de script pour l'élément "blah.js" à l ' "theparent". "blah.js" définit la variable blah à 3.

Puis nous appelons "addEndingScript()" qui ajoute un bloc de script à "theparent". Tout ce bloc de script est appeler scriptDoneRunning() qui alerte la variable blah.

L'idée est que scriptDoneRunning() n'est appelé qu'après l'exécution de blah.js. Comme il est ajouté à "theparent" après l'élément de script externe, je m'attendrais à ce qu'il attende que cela se termine alors il appellerait scriptDoneRunning(). C'est le comportement que je m'attendais, mais cela ne fonctionne que de cette façon dans Firefox. Dans IE, la valeur alertée est 0, ce qui signifie que le code de blah.js n'est pas encore exécuté.

Il s'agit d'une version allégée de ce que la page fait réellement, donc cela n'a pas beaucoup de sens. Mais existe-t-il un moyen d'ajouter le script inline de telle manière que le code de blah.js s'exécute toujours en premier dans les deux navigateurs?

De plus, lorsque ceci est déployé, je n'aurai pas de contrôle sur les js externes. Alors gardez cela à l'esprit;)

Merci!

+0

Y at-il une raison particulière que vous avez besoin des éléments '

3

la raison d'un tel comportement est le fait que les charges IE scripts asynchrones, lorsque vous ajoutez la balise de script dynamiquement (vérifiez le lien MSDN). Pour attendre que le script soit chargé, vous devez utiliser l'événement "onload" (onreadystatechange).

sc.onload = sc.onreadystatechange = function(){}; 

Vous pouvez utiliser le chargeur, que je posté comme solution au question ou écrire votre propre.

PS: Utilisation, setAttribute pour l'attribut src est une mauvaise pratique lorsque vous voulez soutenir IE6 < navigateurs, mieux utiliser la propriété directe, comme

sc.src = "http://bla.js"; 
Questions connexes