JS फ़ाइल में jQuery कैसे जोड़ें

Question

मेरे पास टेबल को छांटने के लिए कुछ कोड विशिष्ट हैं। चूंकि अधिकांश पृष्ठों में कोड सामान्य है, मैं एक जेएस फ़ाइल बनाना चाहता हूं जिसमें कोड होगा और इसका उपयोग करने वाले सभी पृष्ठ इसे वहां से संदर्भित कर सकते हैं।

समस्या यह है: मैं उस .js फ़ाइल में jQuery, और टेबल सॉर्टर प्लगइन कैसे जोड़ूं?

मैंने कुछ इस तरह की कोशिश की:

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

लेकिन यह काम नहीं करता है।

इसे करने का बेहतरीन तरीका क्या है?

Comments

मैं सिर्फ दूसरे के लिए जा रहा हूं जो कुछ अन्य लोगों ने अपने उत्तर में कहा है। यह वास्तव में एक अच्छा विचार नहीं है। यदि आप नियंत्रित करना चाहते हैं कि कौन सी फाइलें एक स्थान पर शामिल हैं, तो लिपियों के टैग लिखने के लिए अपने सर्वर पर एक सामान्य फ़ाइल का उपयोग करें (जैसे script.php सामान्य js फ़ाइलों के लिए स्क्रिप्ट टैग उत्पन्न करेगा)।

— प्रेस्टाटूल

मेज़र और आपका कोड मर्ज करें। और जब आपको इसकी आवश्यकता हो तब सर्वर साइड लॉजिक का उपयोग करें।

— gblazex

Answer 1

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

Comments

मैं जगह लेंगे http://साथ //एक रिश्तेदार प्रोटोकॉल के लिए। यह मानते हुए कि src संपत्ति के साथ काम करता है।

— azz

@DerFlatulator: मुझे इसमें शामिल स्क्रिप्ट के लिए एक चर भेजने की आवश्यकता है। यह कैसे करना है? जैसे मुझे एक वैरिएबल आइटम टाइप = ११ या आइटमटाइप = २२ भेजना है, इसमें शामिल जेएस फाइल है और फिर उसी के अनुसार उस फाइल में इसका उपयोग करना है

— sqlchild

Refused to load the script

यह मेरे द्वारा डाउनलोड की गई फ़ाइल के साथ script.scr स्ट्रिंग को प्रतिस्थापित नहीं करता है (उसी निर्देशिका में बस फ़ाइल का नाम रखा गया है) और मैंने Microsoft jQuery होस्ट लिंक की भी कोशिश की लेकिन वह भी काम नहीं किया।

— कोडेलप 4

Answer 2

यदि आप एक अन्य JS फाइल से jQuery कोड को शामिल करना चाहते हैं, तो यह ट्रिक करना चाहिए:

मेरी HTML फ़ाइल में निम्नलिखित थे:

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

मैंने निम्नलिखित के साथ एक अलग my_jquery.js फ़ाइल बनाई:

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

Comments

तो क्या, यह अभी भी एक अच्छा जवाब है, और यह किसी और को यह करने में मदद कर सकता है कि यह कैसे करना है। Stackoverflow, R-The_Master में आपका स्वागत है!

— टिमोथी ग्रोट

@ उत्पत्ति gen यह वर्तमान में Google का शीर्ष परिणाम है jquery include jsऔर इसमें 13k दृश्य हैं।

— 12

बिलकुल सीधे! निश्चित रूप से मेरी मदद की: पी। बहुत बढ़िया!

— ज़ेबिडलुंड

मेरी मदद की ... 3 साल बाद :)

— tushar747

मैं सिर्फ यह बताना चाहता हूं: आपके js फाइलों को शामिल करने वाला आदेश महत्वपूर्ण है।

— केविनO

Answer 3

आप अपने जेएस फ़ाइल में लोडिंग jQuery प्राप्त करने के लिए नीचे दिए गए कोड का उपयोग कर सकते हैं। मैंने एक jQuery JSField भी जोड़ा है जो काम कर रहा है और यह एक सेल्फ-इनवोकिंग फ़ंक्शन का उपयोग कर रहा है।

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

अन्य विकल्प : - तुम भी कोशिश कर सकते हैं Require.JS जो एक जे एस मॉड्यूल लोडर है।

Comments

बहुमूल्य सराहना के लिए धन्यवाद @StevenSpyrka।

— हेमांशु भल्ला

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

Answer 5

यदि आप अपनी परियोजना से किसी भी js फ़ाइल का संदर्भ जोड़ना चाहते हैं, तो आप इसे सीधे संदर्भ टैग का उपयोग करके भी जोड़ सकते हैं , Visual Studio IDE में यह स्वचालित रूप से समाधान एक्सप्लोरर से वर्तमान फ़ाइल में बाहरी फ़ाइल को खींचकर और गिराकर संभाला जाता है ( यह फाइलों, .js और .css फ़ाइलों को चिह्नित करने के लिए भी काम करता है)

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

Answer 6

समस्या यह है कि आप </script>स्क्रिप्ट का उपयोग कर रहे हैं , जो स्क्रिप्ट टैग को समाप्त कर रहा है। इसे इस्तेमाल करे:

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

Comments

यह समाधान कुछ भी नहीं करता है, क्योंकि scriptटैग पहले ही एक स्ट्रिंग के रूप में देखा जा रहा था, मार्कअप के रूप में नहीं।

— रोजा

Answer 7

यहाँ समाधान है, कि मैंने कुछ अन्य मंचों में कुछ प्रस्तावित समाधानों के संयोजन के रूप में अपनाया।

इस तरह आप एक ही js फाइल में css फाइल और अन्य js फाइल दोनों को संदर्भित कर सकते हैं, इस प्रकार अगली बार केवल एक ही स्थान पर बदलाव कर सकते हैं। अगर आपको इस पर कोई चिंता है तो कृपया मुझे बताएं।

मैंने निम्नलिखित कार्य किए हैं:

1. मैंने jQueryIncluder.js नाम से एक js बनाया है

2. इस फ़ाइल में कोड घोषित और निष्पादित किया गया

   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. मैंने उपरोक्त jQueryIncluder.js फ़ाइल को किसी अन्य js या मेरी .Net परियोजना की xsl फ़ाइल के रूप में संदर्भित किया है:

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

मुझे आशा है कि मेरे प्रयास की सराहना की जाएगी।

धन्यवाद

Answer 8

js फ़ाइल को दूसरी js फ़ाइल के अंदर आयात करना संभव नहीं है

Js के अंदर jquery का उपयोग करने का तरीका है

HTML में js आयात करें या जो भी पेज आप उपयोग कर रहे हैं, जिसके अंदर आप 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');
    });
});

यह निश्चित रूप से आपके लिए काम करेगा

Answer 9

थेरेस एक प्लगइन jQuery जहां सिर्फ फाइलों आप कुछ अन्य js फ़ाइल में की जरूरत है शामिल कर सकते हैं के लिए, यहाँ इसके लिए कड़ी है http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery- लगाना/ ।

इसके अलावा यह डॉक्यूमेंट.राइट लाइन आपकी html फाइल में नहीं html में स्क्रिप्ट टैग लिखेगा।

इसलिए मुझे उम्मीद है कि यह आपकी समस्या को हल करने में आपकी मदद कर सकता है

Comments

यह लिंक अब उपलब्ध नहीं है

— sebisnow

Answer 10

यदि आप अक्सर अपनी jquery फ़ाइल लिंक को एक नई संस्करण फ़ाइल में अपडेट करना चाहते हैं, तो एक ही बार में, कई पृष्ठों पर आपकी साइट पर ..

एक जावास्क्रिप्ट फ़ाइल (.js) बनाएँ और नीचे दिए गए कोड में डालें, और इस जावास्क्रिप्ट फ़ाइल को सभी पृष्ठों पर (सीधे पेज पर jquery फ़ाइल मैप करने के बजाय) मैप करें, इसलिए जब javascript फ़ाइल लिंक इस जावास्क्रिप्ट फ़ाइल में अपडेट हो जाए तो यह साइट पर प्रतिबिंबित करें।

नीचे दिए गए कोड का परीक्षण किया गया है और यह अच्छा काम करता है!

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

Answer 11

आप js और jquery फ़ाइलों को शामिल किए बिना एक मास्टर पेज आधार बना सकते हैं। हेड सेक्शन में मास्टर पेज बेस में कंटेंट प्लेस होल्डर रखें, फिर नेस्टेड मास्टर पेज बनाएं जो इस मास्टर पेज बेस से इनहेरिट करता है। अब अपने एस्प में शामिल करें: नेस्टेड मास्टर पेज में सामग्री, अंत में इस नेस्टेड मास्टर पेज से एक कंटेंट पेज बनाएं

उदाहरण:

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

Answer 12

गतिशील जोड़ने jQuery, js फ़ाइल से सीएसएस। जब हमने onload फ़ंक्शन को बॉडी में जोड़ा है तो हम js फाइल से पेज बनाने के लिए jQuery का उपयोग कर सकते हैं।

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>

Answer 13

यदि document.write ('<\ script ...') काम नहीं कर रहा है, तो document.createElement ('स्क्रिप्ट') आज़माएं ...

उसके अलावा, आपको उस वेबसाइट के प्रकार के बारे में चिंतित होना चाहिए जो आप बना रहे हैं - क्या आपको वास्तव में .js फ़ाइलों से .ss फ़ाइलों को शामिल करने के लिए एक अच्छा विचार है?

Answer 14

बस शीर्ष पर अपनी फ़ाइल में दो फ़ाइलों से कोड की प्रतिलिपि बनाएँ।

या अपनी फ़ाइलों को गतिशील रूप से संयोजित करने के लिए कुछ इस तरह का उपयोग करें http://code.google.com/p/minify/ ।

जोश

Answer 15

मुझे लगता है कि इसका उपयोग करने का सबसे अच्छा तरीका है ...

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

यह Codecademy 'Make a Interactive Website' प्रोजेक्ट से है।

Answer 16

बहुत खोजबीन के बाद, मैं इस मुद्दे को toir_aghai से संकेत के साथ हल करता हूं स्क्रिप्ट लोड घटना के बारे में उत्तर ।

मूल रूप से हमें $jQuery कोड के लिए उपयोग करने की आवश्यकता है , लेकिन jQuery लोड होने तक हम इसका उपयोग नहीं कर सकते। मैं document.createElement()jQuery के लिए एक स्क्रिप्ट जोड़ता था, लेकिन मुद्दा यह है कि जावास्क्रिप्ट का उपयोग करते हुए अगले बयान में लोड करने में समय लगता है$ विफल रहता है। इसलिए, मैंने नीचे दिए गए समाधान का उपयोग किया।

myscript.js कोड है जो jQuery main.js का उपयोग करता है दोनों jquery.min.js और myscript.js फ़ाइलों को लोड करने के लिए उपयोग किया जाता है सुनिश्चित करें कि jQuery लोड है।

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

इस तरह इसने काम किया। का प्रयोग loadJQueryFile()से myscript.js काम नहीं किया। यह तुरंत अगले स्टेटमेंट पर जाता है जो उपयोग करता है $।

Answer 17

मुझे विश्वास है कि आप जो करना चाहते हैं, वह अभी भी इस html फ़ाइल को html डोम में सम्‍मिलित करने के लिए है, यदि ऐसा है तो यह एपोरच काम करेगा।

1. अपनी javascript फ़ाइल में अपना jquery कोड लिखें जैसा कि आप अपने html डोम में करेंगे
2. बॉडी टैग बंद करने से पहले jquery फ्रेमवर्क को शामिल करें
3. Jqyery फ़ाइल शामिल करने के बाद जावास्क्रिप्ट फ़ाइल शामिल करें

उदाहरण: // js फ़ाइल

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

// html डोम

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

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

Answer 18

आप स्क्रिप्ट टैग लिखने के लिए जावास्क्रिप्ट का उपयोग क्यों कर रहे हैं? बस स्क्रिप्ट टैग्स को अपने हेड सेक्शन में जोड़ें। तो आपका दस्तावेज़ कुछ इस तरह दिखाई देगा:

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

Comments

मैं जेएस फाइलों के बारे में बात कर रहा हूं। जेएस फ़ाइल में jQuery संदर्भ कैसे जोड़ें

जश, आप ऐसा नहीं कर सकते। स्क्रिप्ट फ़ाइलों को अन्य स्क्रिप्ट फ़ाइलों में संदर्भित नहीं किया जा सकता है।

— कैनावार

हाँ वे कर सकते हैं, कैनवर। जहाँ तक ब्राउज़र का सवाल है, इससे कोई फर्क नहीं पड़ता कि आप HTML में स्क्रिप्ट टैग जोड़ रहे हैं या स्क्रिप्ट में ही, क्योंकि यह परिणाम की व्याख्या करता है।

— साल्टी

Answer 19

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

Comments

कृपया केवल कोड को उत्तर के रूप में पोस्ट न करें, बल्कि यह भी स्पष्टीकरण दें कि आपका कोड क्या करता है और यह प्रश्न की समस्या को कैसे हल करता है। एक स्पष्टीकरण के साथ उत्तर आमतौर पर अधिक सहायक और बेहतर गुणवत्ता के होते हैं, और upvotes को आकर्षित करने की अधिक संभावना होती है।

— मार्क रोटेवेल