जाँच करें कि यदि jquery लोड किया गया है, तो इसे लोड करें यदि गलत है


117

क्या किसी को पता है कि कैसे जांच की जाती है कि यदि jquery लोड किया गया है (जावास्क्रिप्ट के साथ) तो इसे लोड करें अगर यह hasnt लोड नहीं किया गया है।

कुछ इस तरह

if(!jQuery) {
    //load jquery file
}

1
सर उठाने के लिए धन्यवाद! उम्मीद है कि यह वास्तव में कभी नहीं बुलाया जाएगा। बस थोड़ा अतिरेक जोड़ने की कोशिश कर रहा है
सत्रह

जवाबों:


166

शायद कुछ इस तरह:

<script>
if(!window.jQuery)
{
   var script = document.createElement('script');
   script.type = "text/javascript";
   script.src = "path/to/jQuery";
   document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

5
ध्यान दें कि यह मानता है कि दस्तावेज़ में headयह है कि यह एक स्क्रिप्ट तत्व को जोड़ सकता है
डैनियल लेचेमिनेंट

1
उस पर @DanielLeCheminant अच्छी बात है। क्या हुआ अगर यह था( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( script );
pawelglow

3
@Pawel मैंने पहले स्क्रिप्ट टैग के बाद / बाद कुछ तत्व सम्मिलित किए हैं, क्योंकि आप जानते हैं कि उनमें से एक होना चाहिए।
डैनियल लेकेमिंटेंट

मेरा मानना ​​है कि सभी ब्राउज़रों में एक स्क्रिप्ट टैग को शरीर में काम करना शामिल है।
स्टीवन लू

3
तो, निष्कर्ष में; सबसे सुरक्षित तरीका होगा: (document.getElementsByTagName ('head') [0] document.getElementsByTagName ('स्क्रिप्ट') [0]) .appendChild (स्क्रिप्ट) चूंकि कम से कम स्क्रिप्ट टैग का एक उदाहरण होगा।
टॉरमुटो

106

IE ("(jQuery)" का उपयोग करने से बचें क्योंकि IE त्रुटि वापस करेगा: jQuery 'अपरिभाषित' है

इसके बजाय उपयोग करें: यदि (टाइप करें jQuery == 'अपरिभाषित')

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

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

http://neighborhood.org/core/sample/jquery/append-to-head.htm


किस बारे में script.onload = function() { alert('jQuery loaded!'); }? क्या इससे काम हो जायेगा?
रोजबेक

14

विधि 1:

if (window.jQuery) {  
    // jQuery is loaded  
} else {
    // jQuery is not loaded
}

विधि 2:

if (typeof jQuery == 'undefined') {  
    // jQuery is not loaded
} else {
    // jQuery is loaded
}

यदि jquery.js फ़ाइल लोड नहीं है, तो हम इसे लोड करने के लिए बाध्य कर सकते हैं:

if (!window.jQuery) {
  var jq = document.createElement('script'); jq.type = 'text/javascript';
  // Path to jquery.js file, eg. Google hosted version
  jq.src = '/path-to-your/jquery.min.js';
  document.getElementsByTagName('head')[0].appendChild(jq);
}

8

इसे इस्तेमाल करे :

<script>
  window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

यह जांचता है कि क्या jQuery उपलब्ध है या नहीं, यदि नहीं तो यह निर्दिष्ट पथ से एक गतिशील रूप से जोड़ देगा।

रेफरी: jQuery के लिए एक "भी शामिल हैं"

या

शामिल_ js के लिए बराबर। संदर्भ: https://raw.github.com/kvz/phpjs/master/functions/language/include_once.js

function include_once (filename) {
  // http://kevin.vanzonneveld.net
  // +   original by: Legaev Andrey
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   improved by: Michael White (http://getsprink.com)
  // +      input by: Brett Zamir (http://brett-zamir.me)
  // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   bugfixed by: Brett Zamir (http://brett-zamir.me)
  // -    depends on: include
  // %        note 1: Uses global: php_js to keep track of included files (though private static variable in namespaced version)
  // *     example 1: include_once('http://www.phpjs.org/js/phpjs/_supporters/pj_test_supportfile_2.js');
  // *     returns 1: true
  var cur_file = {};
  cur_file[this.window.location.href] = 1;

  // BEGIN STATIC
  try { // We can't try to access on window, since it might not exist in some environments, and if we use "this.window"
    //    we risk adding another copy if different window objects are associated with the namespaced object
    php_js_shared; // Will be private static variable in namespaced version or global in non-namespaced
    //   version since we wish to share this across all instances
  } catch (e) {
    php_js_shared = {};
  }
  // END STATIC
  if (!php_js_shared.includes) {
    php_js_shared.includes = cur_file;
  }
  if (!php_js_shared.includes[filename]) {
    if (this.include(filename)) {
      return true;
    }
  } else {
    return true;
  }
  return false;
}

2

भले ही आपके पास एक सिर हो सकता है, यह सभी ब्राउज़रों में काम नहीं कर सकता है। यह एकमात्र तरीका था जिसे मैंने लगातार काम करने के लिए पाया।

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
  document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"><\/script>');        
  } 
</script>

2
document.write अत्यधिक पर नहीं है?
कैरिजनेट

1

आप जाँच सकते हैं कि क्या jQuery लोड किया गया है या नहीं जैसे कई तरीकों से:

if (typeof jQuery == 'undefined') {

    // jQuery IS NOT loaded, do stuff here.

}


if (typeof jQuery == 'function')
//or
if (typeof $== 'function')


if (jQuery) {
    // This will throw an error in STRICT MODE if jQuery is not loaded, so don't use if using strict mode
    alert("jquery is loaded");
} else {
    alert("Not loaded");
}


if( 'jQuery' in window ) {
    // Do Stuff
}

अब जाँचने के बाद कि क्या jQuery लोड नहीं है, आप jQuery को इस तरह लोड कर सकते हैं:

हालाँकि इस भाग का उत्तर इस पोस्ट में कई लोगों द्वारा दिया गया है लेकिन फिर भी कोड की पूर्णता के लिए इसका उत्तर दिया जा रहा है


    // This part should be inside your IF condition when you do not find jQuery loaded
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://code.jquery.com/jquery-3.3.1.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);

1

पुरानी पोस्ट लेकिन मैंने एक अच्छा समाधान बनाया जो कि सर्विकल स्थानों पर परीक्षण किया जाता है।

https://github.com/CreativForm/Load-jQuery-if-it-is-not-already-loaded

कोड:

(function(url, position, callback){
    // default values
    url = url || 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
    position = position || 0;

    // Check is jQuery exists
    if (!window.jQuery) {
        // Initialize <head>
        var head = document.getElementsByTagName('head')[0];
        // Create <script> element
        var script = document.createElement("script");
        // Append URL
        script.src = url;
        // Append type
        script.type = 'text/javascript';
        // Append script to <head>
        head.appendChild(script);
        // Move script on proper position
        head.insertBefore(script,head.childNodes[position]);

        script.onload = function(){
            if(typeof callback == 'function') {
                callback(jQuery);
            }
        };
    } else {
        if(typeof callback == 'function') {
            callback(jQuery);
        }
    }
}('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', 5, function($){ 
    console.log($);
}));

GitHub में बेहतर स्पष्टीकरण है, लेकिन इस फ़ंक्शन को सामान्य रूप से आप अपने HTML कोड में कहीं भी जोड़ सकते हैं और यदि आप पहले से लोड नहीं हैं, तो आप jquery को प्रारंभ करेंगे।


0
var f = ()=>{
    if (!window.jQuery) {
        var e = document.createElement('script');
        e.src = "https://code.jquery.com/jquery-3.2.1.min.js";
        e.onload = function () {
            jQuery.noConflict();
            console.log('jQuery ' + jQuery.fn.jquery + ' injected.');
        };
        document.head.appendChild(e);
    } else {
        console.log('jQuery ' + jQuery.fn.jquery + '');
    }
};
f();

आपको इसे समझाने के लिए अपने कोड में कुछ टिप्पणी जोड़नी होगी।
अब्राहिम पोरसाडेकी

0
<script>
if (typeof(jQuery) == 'undefined'){
        document.write('<scr' + 'ipt type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></scr' + 'ipt>');
}
</script>

-1

मैं अपनी परियोजना के लिए CDN का उपयोग कर रहा हूं और फॉलबैक हैंडलिंग के हिस्से के रूप में, मैं नीचे दिए गए कोड का उपयोग कर रहा था,

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
                if ((typeof jQuery == 'undefined')) {
                    document.write(unescape("%3Cscript src='/Responsive/Scripts/jquery-1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));   
                }
</script>

बस सत्यापित करने के लिए, मैंने सीडीएन संदर्भ हटा दिया और कोड निष्पादित किया। इसका टूट और यह अगर के रूप में पाश में प्रवेश कभी नहीं रहा है typeof jQuery के रूप में आ रहा है समारोह के बजाय अपरिभाषित।

यह 1.6.1 jquery के पुराने संस्करण के कैश्ड होने के कारण है जो फ़ंक्शन को वापस करता है और मेरे कोड को तोड़ता है क्योंकि मैं 1.9.1 jquery का उपयोग कर रहा हूं। जैसा कि मुझे jquery के सटीक संस्करण की आवश्यकता है, मैंने नीचे के रूप में संशोधित कोड,

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
            if ((typeof jQuery == 'undefined') || (jQuery.fn.jquery != "1.9.1")) {
                document.write(unescape("%3Cscript src='/Responsive/Scripts/jquery-1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));   
            }
</script>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.