2011-03-18 3 views
0

Puis-je ajouter un élément <script> dans le HEAD avant que le HEAD lui-même soit complètement chargé?appendChild avant la fin du chargement du noeud?

Exemple:

<head> 
<script src="my.js"> 
//etc 

dans le my.js il y a:

var thescript = document.createElement('script'); 
thescript.setAttribute('type','text/javascript'); 
thescript.setAttribute('src','otherfile.js'); 
document.getElementsByTagName('head')[0].appendChild(thescript); 

ce code sera exécuté avant que les navigateurs atteignent </head>

est-ce sécuritaire ou pourrait causer des problmes? Je veux le faire parce que je veux la charge jquery de mon script .js donc je n'ai pas à modifier mes pages pour ajouter les autres <script> manuellement

Merci beaucoup

+0

Je ne pense pas que l'élément de tête sera disponible jusqu'à ce qu'il se termine le chargement ... – JCOC611

+0

Vous pouvez simplement ajouter le script dans le corps? –

+1

Il n'est généralement pas prudent d'effectuer une modification DOM à ce stade du chargement de la page, mais un document.writeln ('

0

C'est à peu près ce que Google Analytics Asynchronous le code de suivi le fait et il ne rencontre généralement pas de problèmes. En utilisant une technique similaire à GA il pourrait se présenter comme suit:

(function() { 
    var thescript = document.createElement('script'); 
    thescript.type = 'text/javascript'; 
    thescript.src = 'otherfile.js'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(thescript, s); 
})(); 

Cependant, rappelez-vous que le code à l'intérieur « otherfile.js » pourrait ne pas être disponible tout de suite si vous devez prendre cela en considération. GA utilise une file d'attente à laquelle vous pouvez ajouter des appels de fonction qui s'exécuteront une fois le script disponible.

0

L'élément de tête ne sera pas disponible avant qu'il ne soit complètement chargé. Vous pouvez utiliser une approche différente, cependant:

N'incluez qu'un seul fichier, appelé "includes.js". Il devrait ressembler à ceci:

function include_once(src) { 
    // get script elements already in the HTML source code, 
    // abort if script has been loaded 
    var scripts = document.getElementsByTagName('script'); 
    if (scripts) { 
    for (var k=0; k < scripts.length; k++) { 
     if (scripts[k].src == src) return; 
    } 
    } 
    // include if not already loaded 
    var script = document.createElement('script'); 
    script.src = src; 
    script.type = 'text/javascript'; 
    (document.getElementsByTagName('head')[0] || document.body).appendChild(script); 
} 

// add all your scripts here 
function addIncludes() { 
    include_once ('js/my.js'); 
} 

Ensuite, addIncludes appel onLoad:

<body onload="addIncludes()"> 

(Cet exemple a été prise et modifiée d'un german site.)

Si vous avez JS qui doit être exécuté directement après le chargement, vous devez définir un intervalle et tester la disponibilité des fichiers .js supplémentaires - rappelez-vous qu'ils sont chargés après la page d'origine est terminée.

Questions connexes