Éviter les conflits jQuery dans une application JavaScript chargée dynamiquement

Question

J'essaie actuellement de développer une application JavaScript qui peut être intégrée dans une page Web existante (que je ne peux pas modifier). L'application a besoin d'une version spécifique de jQuery.

Le script utilisé pour charger l'application fait ce qui suit:

// loading JavaScript needed by my application 
(function() { 
    document.write('<script src="../jquery-1.10.2.min.js"></script>'); 
    document.write(...); // load other scripts (using jQuery 1.10.2) 

    // storing the application's jQuery in a new namespace 
    // to avoid conflicts with other jQuery versions 
    document.write('<script type="text/javascript">' + 
     'appJQ = jQuery.noConflict(true);</script>'); // error: jQuery is undefined in IE<10 
})(); 

// initializing the application itself 
document.onload = function() { 
    // ... 
}; 

Cela fonctionne très bien dans tous les navigateurs, je l'ai testé, sauf IE < 10. Dans IE 9 et le bas, je reçois l'erreur jQuery n'est pas défini. Le déplacement de jQuery vers un nouvel espace de noms dans la fonction document.onload fonctionnerait pour mon application mais provoquerait des conflits avec d'autres scripts sur la page Web qui comprend mon application s'ils ont besoin d'une version différente de jQuery.

Avez-vous des suggestions pour résoudre ce problème? Merci pour votre aide!

Answer 1

Au lieu d'utiliser document.write, essayez de créer un élément <script> et définissant un gestionnaire onload pour cet élément:

(function() { 
    var script = document.createElement('script'); 
    script.src = '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js'; 
    script.onload = function() { 
     var appJQ = jQuery.noConflict(true); 
     // app initialization code 
    }; 
    var head = document.head || document.getElementsByTagName('head')[0]; 
    head.appendChild(script); 
})(); 

Si vous disposez de plusieurs scripts qui dépendent les uns des autres, vous voudrez peut-être essayer d'utiliser un chargeur de script tel que HeadJS ou LABjs.

Si vous souhaitez une flexibilité encore plus grande dans la gestion des dépendances, vous pouvez essayer d'utiliser un chargeur de module tel que RequireJS, Browserify ou webpack.

Answer 2

Les appels document.write se produiraient également une fois le document considéré comme chargé, auquel cas votre fonction onload pourrait se déclencher avant le contenu de cette première fonction. Vous voulez charger les fichiers javascript d'une meilleure manière, de sorte que leur onload initie l'application elle-même.

Answer 3

Après la réponse de Hamza, vous pouvez utiliser cette méthode de chargement d'une manière différente:

var s = document.createElement("script"); 
s.src = "../jquery.min.js"  // insert your own jQuery link 
s.onload = function() { 
    var appJS = jQuery.noConflict(true); 
} 

Hope this helps.