So fügen Sie jQuery in eine JS-Datei ein

Ich habe einen spezifischen Code zum Sortieren von Tabellen. Da der Code auf den meisten Seiten üblich ist, möchte ich eine JS-Datei erstellen, die den Code enthält, und alle Seiten, die ihn verwenden, können von dort aus darauf verweisen.

Das Problem ist: Wie füge ich jQuery und das Tabellensortierer-Plugin zu dieser .js-Datei hinzu?

Ich habe so etwas versucht:

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

aber das scheint nicht zu funktionieren.

Was ist der beste Weg, dies zu tun?

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

Wenn Sie jQuery-Code aus einer anderen JS-Datei einfügen möchten, sollte dies den folgenden Trick ausführen:

Ich hatte Folgendes in meiner HTML-Datei:

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

Ich habe eine separate Datei my_jquery.js mit den folgenden Angaben erstellt:

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

Sie können den folgenden Code verwenden, um das Laden von jQuery in Ihre JS-Datei zu erreichen. Ich habe auch eine jQuery JSFiddle hinzugefügt, die funktioniert und eine selbstaufrufende Funktion verwendet.

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

Andere Option : - Sie können auch Require.JS ausprobieren , einen JS- Modullader .

/* 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 :)');
    }

Wenn Sie beispielsweise aus Ihrem Projekt einen Verweis auf eine js-Datei hinzufügen möchten, können Sie diesen auch direkt mithilfe eines Referenz- Tags hinzufügen. In Visual Studio IDE wird dies automatisch durch Ziehen und Ablegen der externen Datei aus dem Solution Explorer in die aktuelle Datei ( Dies funktioniert auch für Markup-Dateien, .js & .css-Dateien.

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

Das Problem ist, dass Sie </script>innerhalb des Skripts verwenden, wodurch das Skript-Tag beendet wird. Versuche dies:

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

Hier ist die Lösung, die ich als Kombination einiger Lösungsvorschläge in anderen Foren übernommen habe.

Auf diese Weise können Sie sowohl CSS-Dateien als auch andere JS-Dateien in einer JS-Datei referenzieren und so Änderungen beim nächsten Mal nur an einer einzigen Stelle vornehmen. Bitte lassen Sie mich wissen, wenn Sie Bedenken haben.

Ich habe folgendes getan:

1. Ich habe ein js mit dem Namen jQueryIncluder.js erstellt

2. deklariert und folgender Code in dieser Datei ausgeführt

   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. Ich habe auf die obige Datei jQueryIncluder.js in einer anderen js- oder xsl-Datei meines .Net-Projekts wie folgt verwiesen:

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

Ich hoffe, meine Bemühungen werden geschätzt.

Vielen Dank

Es ist nicht möglich, eine JS-Datei in eine andere JS-Datei zu importieren

Die Art und Weise, jquery in js zu verwenden, ist

Importieren Sie die JS in die HTML- oder die von Ihnen verwendete Ansichtsseite, in die Sie die JS-Datei aufnehmen möchten

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

Das wird definitiv für Sie funktionieren

Es gibt ein Plugin für jquery, in dem Sie einfach die benötigten Dateien in eine andere js-Datei aufnehmen können. Hier ist der Link dazu: http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery- Plugin / .

Auch diese Zeile document.write schreibt die Skript-Tags in den HTML-Code, nicht in Ihre js-Datei.

Ich hoffe, das könnte Ihnen helfen, ein wenig bei Ihrem Problem

Wenn Sie häufig den Link Ihrer JQuery-Datei auf eine neue Versionsdatei aktualisieren möchten, auf Ihrer Website auf vielen Seiten auf einmal.

Erstellen Sie eine Javascript-Datei (.js), geben Sie den folgenden Code ein und ordnen Sie diese Javascript-Datei allen Seiten zu (anstatt die JQuery-Datei direkt auf der Seite zuzuordnen). Wenn also der Link zur JQuery-Datei in dieser Javascript-Datei aktualisiert wird, wird dies der Fall sein über die Website reflektieren.

Der folgende Code ist getestet und funktioniert gut!

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

Sie können eine Masterseitenbasis ohne die enthaltenen js- und jquery-Dateien erstellen. Fügen Sie einen Inhaltsplatzhalter in die Masterseitenbasis im Kopfbereich ein und erstellen Sie eine verschachtelte Masterseite, die von dieser Masterseitenbasis erbt. Fügen Sie nun Ihre Includes in ein asp: content auf der verschachtelten Masterseite ein und erstellen Sie schließlich eine Inhaltsseite aus dieser verschachtelten Masterseite

Beispiel:

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

Dynamisches Hinzufügen von jQuery, CSS aus der js-Datei. Wenn wir dem Körper eine Onload-Funktion hinzugefügt haben, können wir mit jQuery eine Seite aus der js-Datei erstellen.

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>

Wenn document.write ('<\ script ...') nicht funktioniert, versuchen Sie document.createElement ('script') ...

Abgesehen davon sollten Sie sich Sorgen über die Art der Website machen, die Sie erstellen. Halten Sie es wirklich für eine gute Idee, .js-Dateien aus .js-Dateien aufzunehmen?

Kopieren Sie einfach den Code aus den beiden Dateien in Ihre Datei oben.

Oder verwenden Sie so etwas wie http://code.google.com/p/minify/ , um Ihre Dateien dynamisch zu kombinieren.

Josh

Ich finde, dass der beste Weg ist, dies zu nutzen ...

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

Dies ist aus dem Projekt 'Make a Interactive Website' der Codecademy.

Nach vielen Recherchen löse ich dieses Problem mit einem Hinweis von ofir_aghai auf die Antwort zum Laden des Skripts.

Grundsätzlich müssen wir $für jQuery-Code verwenden, aber wir können ihn nicht verwenden, bis jQuery geladen ist. Früher habe ich document.createElement()ein Skript für jQuery hinzugefügt, aber das Problem ist, dass das Laden einige Zeit in Anspruch nimmt, während die nächste Anweisung in JavaScript mit $fehlschlägt. Also habe ich die folgende Lösung verwendet.

myscript.js verfügt über Code, der jQuery verwendet. main.js wird zum Laden der Dateien jquery.min.js und myscript.js verwendet, um sicherzustellen, dass jQuery geladen ist.

main.js Code

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

Auf diese Weise hat es funktioniert. Die Verwendung loadJQueryFile()von myscript.js hat nicht funktioniert. Es geht sofort zur nächsten Anweisung, die verwendet wird $.

Ich glaube, was Sie tun möchten, ist immer noch, diese js-Datei in Ihr HTML-Dom aufzunehmen. Wenn ja, dann wird dieser Ansatz funktionieren.

1. Schreiben Sie Ihren JQuery-Code in Ihre Javascript-Datei wie in Ihren HTML-Dom
2. Fügen Sie das jquery-Framework ein, bevor Sie das Body-Tag schließen
3. Fügen Sie eine Javascript-Datei ein, nachdem Sie eine JQYery-Datei eingefügt haben

Beispiel: // js Datei

     $(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>

Warum verwenden Sie Javascript, um die Skript-Tags zu schreiben? Fügen Sie einfach die Skript-Tags zu Ihrem Kopfbereich hinzu. Ihr Dokument sieht also ungefähr so ​​aus:

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