Comment ajouter jQuery dans un fichier JS

Question

Je dispose d'un code spécifique au tri des tableaux. Comme ce code est commun à la plupart des pages, je veux créer un fichier JS qui contiendra le code et toutes les pages qui l'utilisent pourront y faire référence.

Le problème est le suivant : comment ajouter jQuery et le plugin de trieur de tableaux dans ce fichier .js ?

J'ai essayé quelque chose comme ça :

document.writeln('<script src="/javascripts/jquery.js" type="text/javascript"></script>');
document.writeln('<script type="text/javascript" src="/javascripts/jquery.tablesorter.js"></script>');

mais cela ne semble pas fonctionner.

Quelle est la meilleure façon de procéder ?

Answer 1

Si document.write('< \<strkeep>script<strkeep> ...') ne fonctionne pas, essayez document.createElement('script')...

En dehors de cela, vous devriez vous inquiéter du type de site Web que vous réalisez - pensez-vous vraiment que c'est une bonne idée d'inclure des fichiers .js dans des fichiers .js ?

Answer 2

Il suffit de copier le code des deux fichiers dans votre fichier en haut.

ou utiliser quelque chose comme ceci http://code.google.com/p/minify/ pour combiner vos fichiers de manière dynamique.

Josh

Answer 3

Je trouve que le meilleur moyen est d'utiliser ce...

**<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>**

Ceci est tiré du projet Codecademy "Make an Interactive Website".

Answer 4

Après de nombreuses recherches, j'ai résolu ce problème grâce à des conseils de ofir_aghai réponse sur l'événement de chargement du script.

En gros, nous devons utiliser $ pour le code de jQuery, mais nous ne pouvons pas l'utiliser tant que jQuery n'est pas chargé. J'ai utilisé document.createElement() pour ajouter un script pour jQuery, mais le problème est qu'il prend du temps à charger alors que l'instruction suivante en JavaScript en utilisant $ échoue. J'ai donc utilisé la solution ci-dessous.

myscript.js a un code qui utilise jQuery main.js est utilisé pour charger les deux jquery.min.js y myscript.js en s'assurant que jQuery est chargé.

code main.js

window.load = loadJQueryFile();
var heads = document.getElementsByTagName('head');

function loadJQueryFile(){
    var jqueryScript=document.createElement('script');
    jqueryScript.setAttribute("type","text/javascript");
    jqueryScript.setAttribute("src", "/js/jquery.min.js");

    jqueryScript.onreadystatechange = handler;
    jqueryScript.onload = handler;  
    heads[0].appendChild(jqueryScript);
}

function handler(){
    var myScriptFile=document.createElement('script');
    myScriptFile.setAttribute("type","text/javascript");
    myScriptFile.setAttribute("src", "myscript.js");
    heads[0].appendChild(myScriptFile);
 }

Comme ça, ça a marché. Utilisation de loadJQueryFile() de myscript.js n'a pas fonctionné. Il passe immédiatement à l'instruction suivante qui utilise $ .

Answer 5

var jQueryScript = document.createElement('script');  
jQueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
document.head.appendChild(jQueryScript);