Comment ajouter jQuery dans un fichier JS

J'ai du code spécifique au tri des tables. Comme le code est commun dans la plupart des pages, je souhaite créer un fichier JS qui contiendra le code et toutes les pages qui l'utilisent pourront le référencer à partir de là.

Le problème est: Comment puis-je ajouter jQuery et le plugin de tri de table 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 semble ne pas fonctionner.

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

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

Si vous souhaitez inclure du code jQuery à partir d'un autre fichier JS, cela devrait faire l'affaire:

J'avais ce qui suit dans mon fichier HTML:

<script src="jquery-1.6.1.js"></script>
<script src="my_jquery.js"></script>

J'ai créé un fichier my_jquery.js séparé avec les éléments suivants:

$(document).ready(function() {
  $('a').click(function(event) {
    event.preventDefault();
    $(this).hide("slow");
  });
});

Vous pouvez utiliser le code ci-dessous pour charger jQuery dans votre fichier JS. J'ai également ajouté un jQuery JSFiddle qui fonctionne et utilise une fonction auto-appelante.

// Anonymous "self-invoking" function
(function() {
    var startingTime = new Date().getTime();
    // Load the script
    var script = document.createElement("SCRIPT");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    script.type = 'text/javascript';
    document.getElementsByTagName("head")[0].appendChild(script);

    // Poll for jQuery to come into existance
    var checkReady = function(callback) {
        if (window.jQuery) {
            callback(jQuery);
        }
        else {
            window.setTimeout(function() { checkReady(callback); }, 20);
        }
    };

    // Start polling...
    checkReady(function($) {
        $(function() {
            var endingTime = new Date().getTime();
            var tookTime = endingTime - startingTime;
            window.alert("jQuery is loaded, after " + tookTime + " milliseconds!");
        });
    });
})();

Autre option : - Vous pouvez également essayer Require.JS qui est un chargeur de module JS.

/* Adding the script tag to the head as suggested before */

    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "http://code.jquery.com/jquery-2.2.1.min.js";

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = handler;
    script.onload = handler;

    // Fire the loading
    head.appendChild(script);

    function handler(){
       console.log('jquery added :)');
    }

Si vous souhaitez ajouter une référence à un fichier js, par exemple, à partir de votre projet, vous pouvez également l'ajouter directement à l'aide d'une balise de référence.Dans Visual Studio IDE, cela est géré automatiquement en faisant glisser et en déposant le fichier externe de l'explorateur de solutions vers le fichier actuel ( Cela fonctionne aussi pour les fichiers de balisage, .js et .css)

/// <reference path="jquery-2.0.3.js" />

Le problème est que vous utilisez </script>dans le script, ce qui termine la balise de script. Essaye ça:

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

Voici la solution, que j'ai adoptée comme une combinaison de certaines solutions proposées dans d'autres forums.

De cette façon, vous pouvez référencer à la fois des fichiers css et d'autres fichiers js dans un seul fichier js, apportant ainsi des modifications la prochaine fois uniquement à un seul endroit. Veuillez me faire savoir si vous avez des inquiétudes à ce sujet.

J'ai fait ce qui suit:

1. J'ai créé un js avec le nom jQueryIncluder.js

2. déclaré et exécuté suivant le code de ce fichier

   function getVirtualDirectory() {
     var vDir = document.location.pathname.split('/');
     return '/' + vDir[1] + '/';
   }
   
   function include_jQueryFilesToPage() {
     var siteAddress = location.protocol + '//' + document.location.hostname + getVirtualDirectory(); 
     var jqCSSFilePath =  siteAddress + 'includes/jQueryCSS/ehrgreen-theme/jquery-ui-1.8.2.custom.css';
     var jqCoreFilePath = siteAddress + 'includes/jquery-1.4.1.min.js';
     var jqUIFilePath =   siteAddress + 'includes/jquery-ui-1.8.2.custom.min.js';
     var head  = document.getElementsByTagName('head')[0]; 
   
     // jQuery CSS jnclude
     var jqCSS = 'cssIDJQ';  // you could encode the css path itself to generate id.
     if (!document.getElementById(jqCSS)) { 
       var link  = document.createElement('link'); 
       link.id  = jqCSS; 
       link.rel  = 'stylesheet'; 
       link.type = 'text/css'; 
       link.href = jqCSSFilePath; 
       link.media = 'all'; 
       head.appendChild(link); 
     } 
   
     // Core jQuery include
     var jqc = "coreFileRefIDJQ";  
     if (!document.getElementById(jqc)) 
       document.write('<scr' + 'ipt type="text/javascript" id="' + jqc + '" src="' + jqCoreFilePath + '"></scr' + 'ipt>');
   
     // jQueryUI include
     var jqUI = "uiFileRefIDJQ";  
     if (!document.getElementById(jqUI)) 
       document.write('<scr' + 'ipt type="text/javascript" id="' + jqUI + '" src="' + jqUIFilePath + '"></scr' + 'ipt>');
   }
   
   include_jQueryFilesToPage();

3. J'ai référencé le fichier jQueryIncluder.js ci-dessus dans un autre fichier js ou xsl de mon projet .Net comme suit:

   <script type="text/javascript" src="~/includes/jQueryIncluder.js"></script>

J'espère que mes efforts sont appréciés.

Merci

il n'est pas possible d'importer un fichier js dans un autre fichier js

La façon d'utiliser jquery dans js est

importez le js dans le html ou dans la page d'affichage que vous utilisez dans laquelle vous allez inclure le fichier js

view.html

 <script src="<%=request.getContextPath()%>/js/jquery-1.11.3.js"></script>
 <script src="<%=request.getContextPath()%>/js/default.js"></script>

default.js

$('document').ready(function() {
    $('li#user').click(function() {
         $(this).addClass('selectedEmp');
    });
});

cela fonctionnera certainement pour vous

Theres un plugin pour jquery où vous pouvez simplement inclure les fichiers dont vous avez besoin dans un autre fichier js, voici le lien pour cela http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery- plugin / .

Cette ligne document.write écrira également les balises de script dans le html et non dans votre fichier js.

Donc j'espère que cela pourrait vous aider, un peu avec votre problème

Si vous souhaitez fréquemment mettre à jour votre lien de fichier jquery vers un nouveau fichier de version, sur votre site sur de nombreuses pages, en une seule fois.

Créez un fichier javascript (.js) et insérez le code ci-dessous, et mappez ce fichier javascript à toutes les pages (au lieu de mapper le fichier jquery directement sur la page), donc lorsque le lien du fichier jquery est mis à jour sur ce fichier javascript, il sera réfléchir à travers le site.

Le code ci-dessous est testé et fonctionne bien!

document.write('<');
document.write('script ');
document.write('src="');
//next line is the path to jquery file
document.write('/javascripts/jquery-1.4.1.js');
document.write('" type="text/javascript"></');
document.write('script');
document.write('>');

Vous pouvez créer une base de page maître sans fichiers js et jquery inclus. Placez un espace réservé de contenu dans la base de page maître dans la section d'en-tête, puis créez une page maître imbriquée qui hérite de cette base de page maître. Maintenant, placez vos includes dans un asp: contenu dans une page maître imbriquée, créez enfin une page de contenu à partir de cette page maître imbriquée

Exemple:

//in master page base    

<%@  master language="C#" autoeventwireup="true" inherits="MasterPage" codebehind="MasterPage.master.cs" %>
<html>
<head id="Head1" runat="server">
    <asp:ContentPlaceHolder runat="server" ID="cphChildHead">
        <!-- Nested Master Page include Codes will sit Here -->
    </asp:ContentPlaceHolder>
</head>
<body>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    <!-- some code here -->
</body>
</html>

//in nested master page :
<%@  master language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true"
    codebehind="MasterPageLib.master.cs" inherits="sampleNameSpace" %>
<asp:Content ID="headcontent" ContentPlaceHolderID="cphChildHead" runat="server">
    <!-- includes will set here a nested master page -->
    <link href="../CSS/pwt-datepicker.css" rel="stylesheet" type="text/css" />

    <script src="../js/jquery-1.9.0.min.js" type="text/javascript"></script>

    <!-- other includes ;) -->
</asp:Content>
<asp:Content ID="bodyContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ContentPlaceHolder ID="cphChildBody" runat="server" EnableViewState="true">
        <!-- Content page code will sit Here -->
    </asp:ContentPlaceHolder>
</asp:Content>

Ajout dynamique de jQuery, CSS à partir du fichier js. Lorsque nous avons ajouté la fonction onload au corps, nous pouvons utiliser jQuery pour créer une page à partir d'un fichier js.

init();

function init()
{
	addJQuery();
	addBodyAndOnLoadScript();
	addCSS();
}

function addJQuery()
{
	var head = document.getElementsByTagName( 'head' )[0];
	var scriptjQuery = document.createElement( 'script' );
	scriptjQuery.type = 'text/javascript';
	scriptjQuery.id = 'jQuery'
	scriptjQuery.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
	var script = document.getElementsByTagName( 'script' )[0];
	head.insertBefore(scriptjQuery, script);
}

function addBodyAndOnLoadScript()
{
	var body = document.createElement('body')
	body.onload = 
	function()
	{
		onloadFunction();
	};
}

function addCSS()
{
	var head = document.getElementsByTagName( 'head' )[0];
	var linkCss = document.createElement( 'link' );
	linkCss.rel = 'stylesheet';
	linkCss.href = 'E:/Temporary_files/temp_css.css';
	head.appendChild( linkCss );
}

function onloadFunction()
{
	var body = $( 'body' );
	body.append('<strong>Hello world</strong>');
}

html 
{
	background-color: #f5f5dc;
}

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Temp Study HTML Page</title>
		<script type="text/javascript" src="E:\Temporary_files\temp_script.js"></script>
	</head>
	<body></body>
</html>

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

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

copiez simplement le code des deux fichiers dans votre fichier en haut.

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

Josh

Je trouve que le meilleur moyen est d'utiliser ça ...

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

Ceci est issu du projet Codecademy «Make an Interactive Website».

Après de nombreuses recherches, j'ai résolu ce problème avec un indice de la réponse ofir_aghai sur l'événement de chargement de script.

Fondamentalement, nous devons utiliser $pour le code jQuery, mais nous ne pouvons pas l'utiliser tant que jQuery n'est pas chargé. J'avais l'habitude document.createElement()d'ajouter un script pour jQuery, mais le problème est que le chargement prend du temps alors que l'instruction suivante en JavaScript $échoue. Donc, j'ai utilisé la solution ci-dessous.

myscript.js a du code qui utilise jQuery main.js est utilisé pour charger les fichiers jquery.min.js et 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);
 }

De cette façon, cela a fonctionné. L'utilisation loadJQueryFile()de myscript.js ne fonctionnait pas. Il passe immédiatement à l'instruction suivante qui utilise $.

Je crois que ce que vous voulez faire est toujours d'incorporer ce fichier js dans votre domaine html, si tel est le cas, cette approche fonctionnera.

1. Écrivez votre code jquery dans votre fichier javascript comme vous le feriez dans votre dom html
2. Inclure le framework jquery avant de fermer la balise body
3. Inclure le fichier javascript après avoir inclus le fichier jqyery

Exemple: // fichier js

     $(document).ready(function(){
     alert("jquery in js file");
     });

// dom html

    <body>
   <!--some divs content--->

   <script src=/path/to/jquery.js ></script>
   <script src=/path/to/js.js ></script>
   </body>

Pourquoi utilisez-vous Javascript pour écrire les balises de script? Ajoutez simplement les balises de script à votre section principale. Ainsi, votre document ressemblera à ceci:

<html>
  <head>
    <!-- Whatever you want here -->
    <script src="/javascripts/jquery.js" type="text/javascript"></script>
    <script src="/javascripts/jquery.tablesorter.js" type="text/javascript"></script>
  </head>
  <body>
    The contents of the page.
  </body>
</html>

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);