Come aggiungere jQuery nel file JS

Ho del codice specifico per le tabelle di ordinamento. Poiché il codice è comune nella maggior parte delle pagine, voglio creare un file JS che avrà il codice e tutte le pagine che lo usano possono fare riferimento da lì.

Il problema è: come posso aggiungere jQuery e il plug-in sorter tabella in quel file .js?

Ho provato qualcosa del genere:

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

ma questo sembra non funzionare.

Qual è il modo migliore per farlo?

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

Se vuoi includere il codice jQuery da un altro file JS, questo dovrebbe fare il trucco:

Ho avuto il seguente nel mio file HTML:

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

Ho creato un file my_jquery.js separato con il seguente:

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

È possibile utilizzare il codice seguente per ottenere il caricamento di jQuery nel file JS. Ho anche aggiunto un JSFiddle jQuery che funziona e utilizza una funzione auto-invocante.

// 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!");
        });
    });
})();

Altra opzione : - Puoi anche provare Require.JS che è un caricatore di moduli 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 :)');
    }

Se vuoi aggiungere un riferimento a qualsiasi file js, ad esempio, dal tuo progetto, puoi anche aggiungerlo direttamente usando il tag di riferimento , in Visual Studio IDE questo viene gestito automaticamente trascinando il file esterno da Esplora soluzioni al file corrente ( Funziona anche con file di markup, file .js e .css)

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

Il problema è che stai utilizzando </script>lo script, che sta terminando il tag dello script. Prova questo:

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

Ecco la soluzione che ho adottato come combinazione di alcune soluzioni proposte in altri forum.

In questo modo è possibile fare riferimento sia ai file css che ad altri file js in un unico file js, apportando la modifica successiva solo in un'unica posizione. Per favore fatemi sapere se avete dubbi al riguardo.

Ho fatto quanto segue:

1. Ho creato un js con il nome jQueryIncluder.js

2. dichiarato ed eseguito il seguente codice in questo file

   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. Ho fatto riferimento al precedente file jQueryIncluder.js in un altro file js o xsl del mio progetto .Net come segue:

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

Spero che il mio sforzo sia apprezzato.

Grazie

non è possibile importare il file js all'interno di un altro file js

Il modo di usare jquery dentro js è

importa js nell'html o in qualsiasi pagina di visualizzazione che stai utilizzando all'interno della quale includerai il file 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');
    });
});

questo funzionerà sicuramente per te

C'è un plugin per jquery in cui puoi semplicemente includere i file che ti servono in qualche altro file js, ecco il link per farlo http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery- plugin / .

Anche questa riga document.write scriverà i tag di script nel codice HTML non nel tuo file js.

Quindi spero che questo possa aiutarti, un po 'con il tuo problema

Se desideri aggiornare frequentemente il link del tuo file jquery a un nuovo file di versione, attraverso il tuo sito su più pagine, in una volta sola.

Crea un file javascript (.js) e inserisci il codice seguente, e associa questo file javascript a tutte le pagine (invece di mappare il file jquery direttamente sulla pagina), quindi quando il link del file jquery viene aggiornato su questo file javascript riflettere su tutto il sito.

Il codice seguente è testato e funziona bene!

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

È possibile creare una base di pagine mastro senza i file js e jquery inclusi. Inserisci un segnaposto contenuto nella base della pagina principale nella sezione principale, quindi crea una pagina principale nidificata che eredita da questa base della pagina principale. Ora inserisci le tue inclusioni in un asp: contenuto nella pagina principale nidificata, infine crea una pagina di contenuto da questa pagina principale nidificata

Esempio:

//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>

Aggiunta dinamica di jQuery, CSS dal file js. Quando abbiamo aggiunto la funzione onload al corpo, possiamo usare jQuery per creare una pagina dal file 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>

Se document.write ('<\ script ...') non funziona, prova document.createElement ('script') ...

A parte questo, dovresti essere preoccupato per il tipo di sito web che stai creando: pensi davvero che sia una buona idea includere file .js da file .js?

basta copiare il codice dai due file nel tuo file in alto.

o usa qualcosa di simile a questo http://code.google.com/p/minify/ per combinare i tuoi file in modo dinamico.

Josh

Trovo che il modo migliore sia usare questo ...

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

Questo è tratto dal progetto Codecademy "Make an Interactive Website".

Dopo molte ricerche, risolvo questo problema con il suggerimento della risposta ofir_aghai sull'evento di caricamento degli script.

Fondamentalmente dobbiamo usare $per il codice jQuery, ma non possiamo usarlo finché non viene caricato jQuery. Ho usato document.createElement()per aggiungere uno script per jQuery, ma il problema è che ci vuole tempo per caricare mentre la successiva istruzione in JavaScript $non riesce. Quindi, ho usato la soluzione di seguito.

myscript.js sta avendo il codice che utilizza jQuery main.js viene utilizzato per caricare sia i file jquery.min.js che myscript.js assicurandosi che jQuery sia caricato.

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

In questo modo ha funzionato. L'uso loadJQueryFile()da myscript.js non ha funzionato. Passa immediatamente alla dichiarazione successiva che utilizza $.

Credo che quello che vuoi fare sia ancora includere questo file js nel tuo html dom, se è così allora questo strumento funzionerà.

1. Scrivi il tuo codice jquery nel tuo file javascript come faresti nella tua dom html
2. Includi framework jquery prima di chiudere il tag body
3. Includi il file javascript dopo aver incluso il file jqyery

Esempio: // js file

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

// html dom

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

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

Perché stai usando Javascript per scrivere i tag di script? Aggiungi semplicemente i tag di script nella sezione head. Quindi il tuo documento sarà simile a questo:

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