Hoe jQuery in JS-bestand toe te voegen

Ik heb een code die specifiek is voor het sorteren van tabellen. Omdat de code op de meeste pagina’s gebruikelijk is, wil ik een JS-bestand maken waarin de code staat en alle pagina’s die deze gebruiken, kunnen er vanaf dat moment naar verwijzen.

Probleem is: hoe voeg ik de jQuery- en tabelsorteerder-plug-in toe aan dat .js-bestand?

Ik heb zoiets als dit geprobeerd:

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

maar dit lijkt niet te werken.

Wat is de beste manier om dit te doen?


Antwoord 1, autoriteit 100%

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

Antwoord 2, autoriteit 47%

Als je jQuery-code uit een ander JS-bestand wilt opnemen, zou dit voldoende moeten zijn:

Ik had het volgende in mijn HTML-bestand:

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

Ik heb een apart my_jquery.js-bestand gemaakt met het volgende:

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

Antwoord 3, autoriteit 9%

U kunt de onderstaande code gebruiken om jQuery in uw JS-bestand te laden. Ik heb ook een jQuery JSFiddle toegevoegd die werkt en een zelfoproepende functie gebruikt.

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

Antwoord 4, autoriteit 4%

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

Antwoord 5, autoriteit 3%

Als u een verwijzing naar een js-bestand wilt toevoegen, bijvoorbeeld vanuit uw project, kunt u dit ook rechtstreeks toevoegen met reference-tag, in Visual Studio IDE wordt dit automatisch afgehandeld door de externe bestand van oplossingsverkenner naar huidig bestand (Dit werkt ook voor opmaakbestanden, .js & .css-bestanden)

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

Antwoord 6, autoriteit 3%

Het probleem is dat u </script>gebruikt in het script, dat de scripttag beëindigt. Probeer dit:

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

Antwoord 7, autoriteit 3%

Hier is de oplossing, die ik heb aangenomen als een combinatie van enkele voorgestelde oplossingen in sommige andere forums.

Op deze manier kunt u zowel naar css-bestanden als naar andere js-bestanden verwijzen in één js-bestand, zodat u de volgende keer slechts op één plaats wijzigingen kunt aanbrengen. Laat het me weten als je je zorgen maakt.

Ik heb het volgende gedaan:

  1. Ik heb een js gemaakt met de naam jQueryIncluder.js
  2. verklaarde en uitgevoerde volgende code in dit bestand

    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. Ik verwees als volgt naar het bovenstaande jQueryIncluder.js-bestand in een ander js- of xsl-bestand van mijn .Net-project:

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

Ik hoop dat mijn inspanning wordt gewaardeerd.

Bedankt


Antwoord 8, autoriteit 3%

het is niet mogelijk om een js-bestand in een ander js-bestand te importeren

De manier om jQuery in js te gebruiken is

importeer de js in de html of welke weergavepagina je ook gebruikt waarin je het js-bestand gaat opnemen

view.html

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

standaard.js

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

dit zal zeker voor u werken


Antwoord 9, autoriteit 2%

Er is een plug-in voor jQuery waar je de bestanden die je nodig hebt gewoon kunt opnemen in een ander js-bestand, hier is de link ervoor http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery-plugin/.

Ook deze regel document.write schrijft de scripttags in de html en niet in uw js-bestand.

Dus ik hoop dat dit je een beetje kan helpen met je probleem


Antwoord 10

Ik geloof dat je nog steeds dit js-bestand in je html-domein wilt opnemen, als dat zo is, dan zal deze aanpak werken.

  1. Schrijf uw jQuery-code in uw javascript-bestand terwijl u
    zou in je html-domein
  2. Voeg jQuery-framework toe voordat de body-tag wordt gesloten
  3. Javascript-bestand opnemen na opnemen jqyery-bestand

Voorbeeld:
//js-bestand

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

Antwoord 11

Als u uw jQuery-bestandslink regelmatig in één keer op uw site op vele pagina’s naar een nieuwe versie wilt bijwerken.

Maak een javascript-bestand (.js) en voer de onderstaande code in, en wijs dit javascript-bestand toe aan alle pagina’s (in plaats van het jQuery-bestand direct op de pagina toe te wijzen), dus wanneer de jQuery-bestandslink wordt bijgewerkt op dit javascript bestand wordt weergegeven op de hele site.

De onderstaande code is getest en werkt goed!

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

Antwoord 12

U kunt een basispaginabasis maken zonder js- en jQuery-bestanden. Plaats een plaatshouder voor inhoud in de basispaginabasis in de kopsectie en maak vervolgens een geneste basispagina die van deze basispaginabasis erft. Plaats nu uw include in een asp:content in geneste stramienpagina, maak ten slotte een inhoudspagina van deze geneste stramienpagina

Voorbeeld:

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

Antwoord 13

Dynamisch jQuery, CSS uit js-bestand toevoegen.
Toen we de onload-functie aan de body hebben toegevoegd, kunnen we jQuery gebruiken om een pagina van een js-bestand te maken.

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>

Antwoord 14

Als document.write(‘<\script …’) niet werkt, probeer dan document.createElement(‘script’)…

Anders dan dat, zou je je zorgen moeten maken over het type website dat je maakt – denk je echt dat het een goed idee is om .js-bestanden van .js-bestanden op te nemen?


Antwoord 15

kopieer gewoon de code van de twee bestanden naar je bestand bovenaan.

of gebruik iets als dit http://code.google.com/p/minify/om uw bestanden dynamisch te combineren.

Josh


Antwoord 16

Ik vind dat de beste manier is om dit te gebruiken…

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

Dit komt uit het Codecademy-project ‘Maak een interactieve website’.


Antwoord 17

Na veel onderzoek los ik dit probleem op met een hint van ofir_aghaiantwoord over scriptlaadgebeurtenis.

In principe moeten we $gebruiken voor jQuery-code, maar we kunnen het pas gebruiken als jQuery is geladen. Ik heb document.createElement()gebruikt om een script voor jQuery toe te voegen, maar het probleem is dat het laden tijd kost terwijl de volgende instructie in JavaScript met $mislukt. Dus gebruikte ik de onderstaande oplossing.

myscript.jsheeft code die jQuery gebruikt
main.jswordt gebruikt om zowel jquery.min.jsals myscript.jsbestanden te laden en ervoor te zorgen dat jQuery wordt geladen.

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

Zo werkte het. Het gebruik van loadJQueryFile()van myscript.jswerkte niet. Het gaat onmiddellijk naar het volgende statement dat $gebruikt.


Antwoord 18

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

Antwoord 19

Waarom gebruikt u Javascript om de scripttags te schrijven? Voeg eenvoudig de scripttags toe aan uw hoofdgedeelte. Uw document ziet er dus ongeveer zo uit:

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

Other episodes