Google के होस्ट किए गए jQuery का उपयोग करने का सबसे अच्छा तरीका है, लेकिन Google पर मेरी होस्ट की गई लाइब्रेरी में वापस आ जाओ


1016

Google (या अन्य Google द्वारा होस्ट किए गए lib) में होस्ट किए गए jQuery को लोड करने का प्रयास करने का एक अच्छा तरीका क्या होगा , लेकिन Google का प्रयास विफल होने पर jQuery की मेरी प्रतिलिपि लोड करें?

मैं यह नहीं कह रहा हूं कि गूगल परतदार है। ऐसे मामले हैं जहां Google प्रतिलिपि अवरुद्ध है (उदाहरण के लिए ईरान में, उदाहरण के लिए)।

क्या मैं एक टाइमर सेट करूंगा और jQuery ऑब्जेक्ट के लिए जांच करूंगा?

दोनों प्रतियों के माध्यम से आने वाला खतरा क्या होगा?

वास्तव में "सिर्फ एक Google का उपयोग करें" या "बस अपना खुद का उपयोग करें" जैसे उत्तरों की तलाश नहीं है। मैं उन तर्कों को समझता हूं। मैं यह भी समझता हूं कि उपयोगकर्ता के पास Google संस्करण कैश्ड होने की संभावना है। मैं सामान्य रूप से क्लाउड के लिए कमियों के बारे में सोच रहा हूं।


संपादित करें: इस भाग को जोड़ा गया ...

चूँकि Google ने ajax पुस्तकालयों को लोड करने के लिए google.load का उपयोग करने का सुझाव दिया है, और जब यह किया जाता है तो कॉलबैक करता है, मैं सोच रहा हूं कि क्या इस समस्या को क्रमबद्ध करने की कुंजी है।

मुझे पता है कि यह थोड़ा पागल लगता है। मैं सिर्फ यह पता लगाने की कोशिश कर रहा हूं कि यह विश्वसनीय तरीके से किया जा सकता है या नहीं।


अपडेट: jQuery अब Microsoft के CDN पर होस्ट किया गया है।

http://www.asp.net/ajax/cdn/


9
बेशक पहला उत्तर था "Google होस्ट किए गए संस्करण का उपयोग न करें।" :-)
नोसेरेडना

7
बेशक यह था क्योंकि यदि आप एक गंभीर वेब साइट की मेजबानी करना चाहते हैं, तो आप अपनी फ़ाइलों को होस्ट करने वाले किसी और पर भरोसा नहीं करते हैं।
ब्रायन मिगलोरिसी

6
@ ब्रायन मिगलोरिसी, मुझे लगता है कि ट्विटर आखिर इतना गंभीर नहीं है? लेकिन मैं मानता हूं कि वे एक महीने पहले की तरह Google के साथ अपनी समस्याएँ थे जब Google नीचे चला गया।
इयोनू जी। स्टेन

18
जेएस लिबास होस्टिंग के लिए Google का उपयोग करने या न करने का गुण एक योग्य है, लेकिन इसकी चर्चा कई अन्य धागों में की गई है। मैं लोडिंग देरी पर जेएस कमबैक के बारे में तकनीकी उत्तरों की तलाश कर रहा था।
नोसरेडना

2
@ जो चंग: यह उपयोगकर्ता के सिस्टम पर कैश होने की संभावना है, पेज लोड को तेज करता है। मुझे बैंडविड्थ बचाता है। Google की CDN का उपयोग करता है। आदि
नोसरेडना

जवाबों:


810

आप इसे इस तरह हासिल कर सकते हैं:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script>
       window.jQuery || document.write('<script src="/path/to/your/jquery"><\/script>');
</script>

यह आपके पेज में होना चाहिए <head>और <body>त्रुटियों से बचने के लिए किसी भी jQuery के तैयार इवेंट हैंडलर में होना चाहिए (हालांकि यह मूर्खतापूर्ण नहीं है!)।

Google द्वारा होस्ट किए गए jQuery का उपयोग नहीं करने का एक और कारण यह है कि कुछ देशों में, Google के डोमेन नाम पर प्रतिबंध लगा दिया गया है।


35
जावास्क्रिप्ट डाउनलोड अवरुद्ध (तुल्यकालिक) पहले से नहीं हैं? मुझे लगता है कि डबल-कॉपी मुद्दा इसलिए समस्या नहीं होगी।
मैट शर्मन

68
जावास्क्रिप्ट डाउनलोड पहले से ही सिंक्रोनस होना चाहिए, जैसा कि मैट शर्मन ने कहा था। अन्यथा, कई समस्याएं होती हैं यदि पृष्ठ एक इनलाइन स्क्रिप्ट को निष्पादित करने का प्रयास करता है जो एक पुस्तकालय पर भरोसा करता है जो केवल आधा डाउनलोड किया गया था, या पुस्तकालय विस्तार पूरी तरह से डाउनलोड किए गए और निष्पादित किए बिना पुस्तकालय विस्तार किया गया था। यही कारण है कि याहू YSlow पृष्ठों के अंत में जावास्क्रिप्ट रखने के लिए फिर से आता है; ताकि यह अन्य पेज एलिमेंट्स (स्टाइल और इमेज सहित) के डाउनलोड को ब्लॉक न करे। बहुत कम से कम, ब्राउज़र को क्रमिक रूप से होने के लिए निष्पादन में देरी करनी होगी।
गप्पल

42
एक सत्यापनकर्ता कट्टरपंथी से छोटा फिक्स: स्ट्रिंग '</' को जावास्क्रिप्ट में अनुमति नहीं है, क्योंकि इसे स्क्रिप्ट टैग (SGML शॉर्ट टैग नोटेशन) के अंत के रूप में गलत समझा जा सकता है। इसके बजाय '<' + '/ स्क्रिप्ट>' करें। चीयर्स,
बोल्ड्यूविन

8
यह उदाहरण काम नहीं करेगा। 1) यदि Google ajax पुस्तकालय उपलब्ध नहीं है, तो इसे विफल होने से पहले समय देना होगा। इसमें थोड़ा सा समय लग सकता है। नेटवर्क से मेरे कंप्यूटर को डिस्कनेक्ट करने के मेरे परीक्षण में यह सिर्फ कोशिश की और कोशिश की और कोशिश की और टाइमआउट नहीं किया। 2) अगर (jQuery) कोई त्रुटि करेगा क्योंकि jQuery परिभाषित नहीं है, इसलिए जावास्क्रिप्ट को यह नहीं पता है कि इसके साथ क्या करना है।
RedWolves

32
परीक्षण करने के लिए यदि jQuery लोड किया गया था, (? Window.jQuery) ठीक काम करता है, और तब टाइपऑफ़ की जाँच की जाती है।
जोर्न ज़ेफ़रेर जूल

335

अब तक ऐसा करने का सबसे आसान और साफ तरीका:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/your/jquery"><\/script>')</script>

1
@jpp के लिए नहीं XHTML 1.0औरHTML 4.01
बेंजामिन

5
लोग मुझे type="text/javascript"पुर्जे हटाने के लिए कहते रहते हैं, इसलिए पुराने ब्राउज़रों के लिए html लिखने वाले लोगों को ध्यान दें कि अब आपको इसे जोड़ना होगा।
बेंजामिन

6
@BenjaminRH: type="text/javascript"पुराने ब्राउज़र में भी अनावश्यक था, क्योंकि वे सभी जावास्क्रिप्ट में डिफ़ॉल्ट थे। वास्तव में पुराने ब्राउज़रों ने languageविशेषता को देखा ; लेकिन फिर भी, जावास्क्रिप्ट डिफ़ॉल्ट था यदि विशेषता गायब थी।
मार्टिज़न

1
@Martijn लेकिन मुझे चमकदार सत्यापन बिल्ला पसंद है :)
बेंजामिन

3
@ ट्रोजन पूरी तरह से संभव है, बस कॉल को स्टैक करें। ध्यान दें कि इस बिंदु पर आप नए कनेक्शन होस्ट खोल रहे हैं, इसलिए HTTP पाइपलाइनिंग संभवतः तेज होगी। ... <script src="//cdn1.com/jquery.js"></script> <script>window.jQuery || document.write('<script src="//cdn2.com/jquery.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="local/jquery.js"><\/script>')</script>
टॉम मैकेंजी

76

यह मेरे लिए काम करने लगता है:

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
    google.load("jquery", "1.3.2");
} else {
    document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
    $('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
    <p id="test">hello jQuery</p>
</body>
</html>

जिस तरह से यह काम करता है वह उस googleवस्तु का उपयोग करना है जो http://www.google.com/jsapi पर कॉल कर रहा है को windowवस्तु पर लोड करता है। यदि वह वस्तु मौजूद नहीं है, तो हम मान रहे हैं कि Google तक पहुंच विफल हो रही है। यदि ऐसा है, तो हम एक स्थानीय कॉपी का उपयोग करके लोड करते हैं document.write(मैं इस मामले में अपने स्वयं के सर्वर का उपयोग कर रहा हूं, कृपया इस परीक्षण के लिए अपने स्वयं के उपयोग करें)।

मैं भी उपस्थिति के लिए परीक्षण करता window.google.loadहूं - मैं यह typeofदेखने के लिए भी जांच कर सकता हूं कि चीजें ऑब्जेक्ट या फ़ंक्शन उपयुक्त हैं। लेकिन मुझे लगता है कि यह चाल है।

यहाँ सिर्फ लोडिंग लॉजिक है, क्योंकि कोड हाइलाइटिंग विफल हो रही है क्योंकि मैंने पूरे HTML पृष्ठ को पोस्ट किया था जो मैं परीक्षण कर रहा था:

if (window.google && window.google.load) {
    google.load("jquery", "1.3.2");
} else {
    document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}

हालाँकि मुझे कहना होगा, मुझे यकीन नहीं है कि अगर यह आपकी साइट के आगंतुकों के लिए एक चिंता का विषय है, तो आपको इस पर ध्यान देना चाहिए Google AJAX लाइब्रेरीज़ API से ।

मजेदार तथ्य : मैंने शुरुआत में विभिन्न संस्करणों में इसके लिए एक प्रयास..चेक ब्लॉक का उपयोग करने की कोशिश की थी, लेकिन ऐसा संयोजन नहीं मिला जो इस तरह से साफ हो। मुझे इस विचार के अन्य क्रियान्वयन को देखने के लिए दिलचस्पी होगी, विशुद्ध रूप से एक अभ्यास के रूप में।


1
इस स्थिति में google.load का उपयोग करने से क्या फायदा है, बजाय ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js को सीधे लोड करने के बजाय, जैसे Rony ने सुझाव दिया है? मुझे लगता है कि इसे लोड करना सीधे तौर पर हटाए गए पुस्तकालयों के साथ समस्याएँ पकड़ता है (क्या होगा अगर Google JQuery 1.3.2 की सेवा बंद कर देता है)। इसके अलावा, Rony के संस्करण नोटिस नेटवर्क की समस्याओं के बाद www.google.com/jsapi को लाया गया है, खासकर जब jsapi को कैश से लोड किया गया है? सुनिश्चित करने के लिए किसी को google.load कॉलबैक का उपयोग करने की आवश्यकता हो सकती है (या हो सकता है कि google.load को if (..) में शामिल करने के लिए कुछ वापसी मूल्य हो।
अर्जन

यदि कोई Google.com की उपस्थिति के लिए परीक्षण कर रहा है, तो कोई नेटवर्क कॉल कर सकता है, या कोई व्यक्ति "गेटकीपर" ऑब्जेक्ट की उपस्थिति की जांच कर सकता है। मैं जो कर रहा हूं वह Google ऑब्जेक्ट और उसके "लोड" फ़ंक्शन के लिए जाँच कर रहा है। यदि वे दोनों विफल होते हैं, तो कोई भी Google नहीं, और मुझे स्थानीय संस्करण की आवश्यकता है। Rony का संस्करण वास्तव में www.google.com/jsapi URL को पूरी तरह से अनदेखा करता है, इसलिए मुझे यकीन नहीं है कि आप क्यों संकेत देते हैं कि यह प्राप्त किया गया होगा।
आर्टलंग

अंत में, यह आवश्यक है कि jquery पुस्तकालय लोड किया गया है। किसी भी Google लाइब्रेरी की आवश्यकता नहीं है। रोनी के जवाब में, कोई यह सुनिश्चित करने के लिए जानता है कि क्या Google (या कैश) से लोड करना सफल रहा। लेकिन "अगर (window.google && window.google.load)" के लिए आपके चेक में, jquery लाइब्रेरी अभी भी लोड नहीं हुई है। Jquery लाइब्रेरी की वास्तविक लोडिंग मान्य नहीं है?
अर्जन

आह, मैं देख रहा हूँ कि मैं कैसे भ्रम का कारण बना। "Rony के संस्करण ने नेटवर्क की समस्याओं के बारे में जानकारी प्राप्त की है, www.google.com/jsapi को बेहतर ढंग से पढ़ा जाना चाहिए": "आपके संस्करण को नेटवर्क की समस्याओं के बारे में ध्यान नहीं है" www.google.com/jsapi को लाया गया है।
अर्जन

2
हमने हाल ही में अपने jQuery होस्ट के रूप में Google का उपयोग करने के लिए स्विच किया है; अगर हमें अवरुद्ध उपयोगकर्ताओं से कोई बग रिपोर्ट मिलती है, तो मैं आपके उत्तर का एक प्रकार इस्तेमाल करूंगा जो हमारे ग्राहक कोड को फिर से प्रकाशित करेगा। अच्छा उत्तर!
जारोड डिक्सन

30

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

Modernizr.load([{
    load : '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
},{
    test : window.jQuery,
    nope : 'path/to/local/jquery-1.7.2.min.js',
    both : ['myscript.js', 'another-script.js'],
    complete : function () {
        MyApp.init();
    }
}]);

यह Google-cdn से jQuery को लोड करता है। बाद में इसकी जाँच की जाती है, यदि jQuery को सफलतापूर्वक लोड किया गया था। यदि नहीं ("nope"), स्थानीय संस्करण लोड किया गया है। साथ ही आपकी व्यक्तिगत स्क्रिप्ट लोड की जाती हैं - "दोनों" इंगित करता है, कि परीक्षण के परिणाम से लोड-प्रक्रिया स्वतंत्र रूप से iniated है।

जब सभी लोड-प्रक्रियाएं पूरी हो जाती हैं, तो 'MyApp.init' मामले में एक फ़ंक्शन निष्पादित किया जाता है।

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


2
मुझे लगता है कि आप प्रश्न के बिंदु को याद कर रहे हैं - सीडीएन से moernizr स्क्रिप्ट को लोड करने के बारे में आप क्या करेंगे?
जॉर्ज फिलीपकोस

2
मैं CDN से मॉडर्निज़ लोड करने की अनुशंसा नहीं कर सकता। बल्कि आधुनिकता से सबसे छोटा रिवाज बनाना चाहिए।
इमानुएल क्लूज

2
तो यह विकल्प +16 मिलता है, 500/200 + की तुलना में अन्य विकल्प मिल रहे हैं। लेकिन यह काफी अच्छा लगता है। क्या यह मॉर्डनाइज़र पर निर्भर होने के कारण लोकप्रिय नहीं है? मैं वैसे भी हमारी साइट में मॉर्डनाइज़र का उपयोग कर रहा हूं, इसलिए यदि यह अन्य उत्तरों से बेहतर है, तो क्या कोई मुझे बता सकता है? JQuery के लिए काफी नया है, इसलिए स्पष्टीकरण की सराहना की जाती है।
redfox05

2
उत्तर के समय में यह वास्तव में एक अच्छा विकल्प था, लेकिन 2015 के अनुसार, yepnope.jsपदावनत हो गया है। देखें stackoverflow.com/questions/33986561/…
ओमेरक क्रोनेन

इस प्रश्न की तरह ही समस्याओं के समाधान के लिए मॉर्डनिज़्र बनाया गया था। +1
कार्लोस क्विजानो

21

यहाँ कुछ महान समाधान हैं, लेकिन मैं इसे स्थानीय फ़ाइल के बारे में एक कदम आगे ले जाना चाहूंगा।

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

इसके लिए मेरा कारण यह है कि जब मैं Google से लोड करता हूं, तो स्थानीय सर्वर पर मेरे पास क्या है, इस पर नज़र रखने की बात आती है। यदि मैं संस्करण बदलना चाहता हूं, तो मैं अपनी स्थानीय कॉपी को Google से लोड करने की कोशिश कर रहा हूं, जो कि मैं चाहता हूं, के साथ समन्वयित रखना चाहता हूं। ऐसे वातावरण में जहां कई डेवलपर्स हैं, मुझे लगता है कि इस प्रक्रिया को स्वचालित करने के लिए सबसे अच्छा तरीका होगा ताकि सभी को एक कॉन्फ़िगरेशन फ़ाइल में एक संस्करण संख्या को बदलना पड़े।

यहाँ मेरा प्रस्तावित समाधान है कि सिद्धांत में काम करना चाहिए:

  • एप्लिकेशन कॉन्फ़िगरेशन फ़ाइल में, मैं 3 चीजें संग्रहीत करूंगा: लाइब्रेरी के लिए निरपेक्ष URL, जावास्क्रिप्ट एपीआई के लिए URL और संस्करण संख्या
  • एक वर्ग लिखें जो पुस्तकालय की फ़ाइल सामग्री को स्वयं प्राप्त करता है (ऐप कॉन्फिगर से URL प्राप्त करता है), इसे मेरे डेटा स्रोत में नाम और संस्करण संख्या के साथ संग्रहीत करता है
  • एक हैंडलर लिखें जो मेरी स्थानीय फ़ाइल को db से बाहर खींचता है और संस्करण संख्या बदलने तक फ़ाइल को कैश करता है।
  • यदि यह परिवर्तन (मेरे एप्लिकेशन कॉन्फ़िगरेशन में) होता है, तो मेरी कक्षा संस्करण संख्या के आधार पर फ़ाइल सामग्री को खींच लेगी, इसे मेरे डेटा स्रोत में एक नए रिकॉर्ड के रूप में सहेजेगी, फिर हैंडलर नए संस्करण में किक करेगा और उसकी सेवा करेगा।

सिद्धांत रूप में, यदि मेरा कोड ठीक से लिखा गया है, तो मुझे केवल इतना करना होगा कि मेरे ऐप कॉन्फिगरेशन में वर्जन नंबर बदल दें फिर वायोला! आपके पास एक फ़ॉलबैक समाधान है जो स्वचालित है, और आपको अपने सर्वर पर भौतिक फ़ाइलों को बनाए रखने की आवश्यकता नहीं है।

हर कोई क्या सोचता है? शायद यह ओवरकिल है, लेकिन यह आपके AJAX पुस्तकालयों को बनाए रखने का एक सुंदर तरीका हो सकता है।

बलूत का फल


यदि आप वह सब काम सिर्फ jQuery के लिए कर रहे हैं , तो मैं कहूंगा कि यह ओवरकिल है। हालाँकि, यदि आपके पास पहले से ही आपके ऐप के अन्य टुकड़ों के लिए कुछ घटक मौजूद हैं (जैसे यदि आप पहले से ही स्क्रिप्ट को किसी DB से लोड करते हैं) तो यह बहुत अच्छा लगता है।
माइकल हरने

1
पूरी तरह से और उपन्यास होने के लिए +1, हालांकि मुझे यकीन नहीं है कि लाभ देव समय और जटिलता को सही ठहराता है।
कोरी हाउस

20
if (typeof jQuery == 'undefined') {
// or if ( ! window.jQuery)
// or if ( ! 'jQuery' in window)
// or if ( ! window.hasOwnProperty('jQuery'))    

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '/libs/jquery.js';

  var scriptHook = document.getElementsByTagName('script')[0];
  scriptHook.parentNode.insertBefore(script, scriptHook);

}

आपके द्वारा CDN से Google की प्रतिलिपि शामिल करने का प्रयास करने के बाद।

HTML5 में, आपको typeविशेषता सेट करने की आवश्यकता नहीं है ।

आप भी उपयोग कर सकते हैं...

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

2
+1 अधिक साफ दिखता है। शीर्ष पर एक मामूली टाइपो है जो मैं स्पष्ट नहीं कर सकता क्योंकि इसके अरी नाबालिग दो बंद कोष्ठक 'अपरिभाषित' के बाद
नवीन

1
पहला विकल्प क्रोम चेतावनी से बचा जाता है[Violation] Avoid using document.write().
बॉब स्टीन

पहला विकल्प, दुर्भाग्य से, तुल्यकालिक रूप से लोड करने के लिए प्रकट नहीं होता है । दूसरा विकल्प करता है
बॉब स्टीन

10

आप अपनी स्थानीय फ़ाइल को अंतिम उपाय के रूप में उपयोग करना चाह सकते हैं।

लगता है अब jQuery के अपने CDN https का समर्थन नहीं करता है। अगर यह तुमने किया तो पहले वहां से लोड करना चाह सकते हैं।

तो यहाँ अनुक्रम है: Google CDN => Microsoft CDN => आपकी स्थानीय प्रति।

<!-- load jQuery from Google's CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<!-- fallback to Microsoft's Ajax CDN -->
<script> window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js">\x3C/script>')</script> 
<!-- fallback to local file -->
<script> window.jQuery || document.write('<script src="Assets/jquery-1.8.3.min.js">\x3C/script>')</script> 

क्या वास्तव में एक से अधिक गिरावट की आवश्यकता है? यदि दोनों ऑफ़लाइन उपयोगकर्ता आपकी साइट को देखने से पहले एक मिनट से अधिक इंतजार कर रहे हैं
जॉर्ज फिलीपकोस

1
स्क्रिप्ट को लोड करने में विफल होने में 1 मिनट नहीं लगता है, यह करता है।
एडवर्ड ओलिमिसन

@ geo1701 और एडवर्ड, वास्तव में तीसरे की कोई आवश्यकता नहीं है। यहां तक ​​कि एक गिरावट भी अभी तक विश्वसनीय साबित नहीं हुई है। यदि Google API नीचे है, तो मैंने अभी तक कोई गारंटी नहीं देखी है कि पहला प्रयास बिल्कुल विफल हो जाएगा। मैंने एक केस परिदृश्य का अनुभव किया जहां सीडीएन लोड करने में कभी विफल नहीं हुआ, पृष्ठ को कभी प्रस्तुत करने से रोक रहा है, जैसा कि यहां बताया गया है: stevesouders.com/blog/2013/03/18/http-archive-jquery/…
hexalys

6

सशर्त रूप से नवीनतम / विरासत jQuery के संस्करण और कमबैक लोड करें:

<!--[if lt IE 9]>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/public/vendor/jquery-legacy/dist/jquery.min.js">\x3C/script>')</script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/public/vendor/jquery/dist/jquery.min.js">\x3C/script>')</script>
<!--<![endif]-->

यह क्रॉस-ब्राउज़र संगत नहीं है।
जोश हब्दास

जोश, हाँ, यह है।
नीकर

5
  • चरण 1: क्या jQuery लोड करने में विफल रहा? ( jQueryचर की जाँच करें)

जावास्क्रिप्ट में एक नहीं परिभाषित चर की जांच कैसे करें

  • चरण 2: डायनामिक रूप से आयात (बैकअप) जावास्क्रिप्ट फ़ाइल

मैं एक जावास्क्रिप्ट फाइल को दूसरी जावास्क्रिप्ट फाइल में कैसे शामिल करूं?



4

यहाँ इस पर एक महान व्याख्या है!

इसके अलावा देरी और टाइमआउट लोडिंग को लागू करता है!

http://happyworm.com/blog/2010/01/28/a-simple-and-robust-cdn-failover-for-jquery-14-in-one-line/


लिंक-केवल उत्तर उपयोगी नहीं हैं और निम्न गुणवत्ता वाले माने जाते हैं। स्रोत के लिए पाठ्यक्रम की विशेषता के साथ, अपने उत्तर में प्रासंगिक बिट्स की प्रतिलिपि बनाने पर विचार करें।
random_user_name

@cale_b क्या आप मजाक कर रहे हैं? यह उत्तर 7 साल से अधिक पुराना है, इसलिए ऐसी टिप्पणी अनुचित है।
स्टुअर्ट।सलिनार

हाँ, यह एक पुराना उत्तर है। हालांकि उनका सुझाव मान्य है। उत्तर जो केवल लिंक कहीं और हैं वे विलोपन के लिए उम्मीदवार हैं। इसके अलावा पाठक: meta.stackoverflow.com/q/8259
रोब

मैं पूरी तरह सहमत हूं, मैं खुद सुझावों के साथ संयत रहूंगा - लेकिन यह 7 साल बाद यह कहना व्यर्थ है। इसे 7 साल पहले की तरह मॉडरेट किया जाना चाहिए था, 7 साल बाद नहीं।
स्टुअर्ट।सलिनर

1
@ Stuart.Sklinar - अगर मैंने इसे 7 साल पहले देखा होता, तो मैं :) मुझे खुद को यहां कुछ शोध करते हुए, और पहली बार ऐसा करते हुए पाया। आपको निराश करने के लिए क्षमा करें - मुझे लगता है कि SO पर हमारी नौकरियां साइट के स्टीवर्ड हैं, जिसका अर्थ कभी-कभी टिप्पणी करना, संपादन करना या पुराने प्रश्नों या उत्तरों को सुधारना होता है ...
random_user_name

4

ASP.NET MVC 5 का उपयोग करने वाले लोगों के लिए, इस कोड को अपने बंडल में जोड़ें। CDN को jquery के लिए CDN सक्षम करने के लिए:

bundles.UseCdn = true;
Bundle jqueryBundle = new ScriptBundle("~/bundles/jquery", "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js").Include("~/Scripts/jquery-{version}.js");
jqueryBundle.CdnFallbackExpression = "window.jQuery";
bundles.Add(jqueryBundle);

4

अद्यतन:
यह उत्तर गलत निकला। कृपया वास्तविक स्पष्टीकरण के लिए टिप्पणियाँ देखें।


आप में से अधिकांश प्रश्न का उत्तर दिया गया है, लेकिन अंतिम भाग के लिए:

दोनों प्रतियों के माध्यम से आने वाला खतरा क्या होगा?

वास्तव में कोई नहीं। आप बैंडविड्थ को बर्बाद कर सकते हैं, दूसरी बेकार कॉपी डाउनलोड करके कुछ मिलीसेकंड जोड़ सकते हैं, लेकिन अगर वे दोनों के माध्यम से आते हैं तो वास्तविक नुकसान नहीं है। बेशक, आपको उपरोक्त वर्णित तकनीकों का उपयोग करने से बचना चाहिए।


5
वास्तव में, दो बार jQuery लोड करने से इस समस्या के अनुसार बहुत सारी समस्याएं हो सकती हैं ।
शैडोकाट

आप स्वयं इसका परीक्षण क्यों नहीं करते हैं और मैन्युअल रूप से jquery लाइब्रेरी को दो बार लोड करते हैं। तब जवाब सामने होगा।
luke_mclachlan

वास्तव में यह गलत क्यों है? @ ShadowCat7 क्या आप इसके कारण होने वाली समस्याओं के बारे में अधिक विशिष्ट हो सकता है? एकमात्र समस्या जो मुझे आपके द्वारा लिंक किए गए प्रश्न में स्पष्ट रूप से पहचानी गई है, "सभी पहले से लोड किए गए प्लग को साफ़ करना।" लेकिन वह एक ही jQuery फ़ाइल को दो बार बैक-टू-बैक लोड करने के लिए लागू नहीं होना चाहिए, है ना? मैं पूछता हूं क्योंकि स्थानीय गिरावट के अन्य समाधान इतने जटिल हैं, और डॉक्यूमेंट.राइट को कुछ स्थानों पर बुराई के रूप में चित्रित किया गया है ।
बॉब स्टीन

2

मैंने एक Gist बनाया है जिसे गतिशील रूप से jQuery को लोड करना चाहिए यदि यह पहले से लोड नहीं है, और यदि स्रोत विफल हो जाता है, तो यह कमियां (कई उत्तरों से एक साथ सिले) पर आगे बढ़ता है: https://gist.github.com/tigerhawkvok/9th3154

कृपया ध्यान दें कि मैं जिस्ट को अपडेट रखने की योजना बना रहा हूं लेकिन यह जवाब नहीं है कि यह किस लायक है!

/* See https://gist.github.com/tigerhawkvok/9673154 for the latest version */
function cascadeJQLoad(i) { // Use alternate CDNs where appropriate to load jQuery
    if (typeof(i) != "number") i = 0;
    // the actual paths to your jQuery CDNs
    var jq_paths = [
        "ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js",
        "ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"
    ];
    // Paths to your libraries that require jQuery
    var dependent_libraries = [
        "js/c.js"
    ];
    if (window.jQuery === undefined && i < jq_paths.length) {
        i++;
        loadJQ(jq_paths[i], i, dependent_libraries);
    }
    if (window.jQuery === undefined && i == jq_paths.length) {
        // jQuery failed to load
        // Insert your handler here
    }
}

/***
 * You shouldn't have to modify anything below here
 ***/

function loadJQ(jq_path, i, libs) { //load jQuery if it isn't already
    if (typeof(jq_path) == "undefined") return false;
    if (typeof(i) != "number") i = 1;
    var loadNextJQ = function() {
        var src = 'https:' == location.protocol ? 'https' : 'http';
        var script_url = src + '://' + jq_path;
        loadJS(script_url, function() {
            if (window.jQuery === undefined) cascadeJQLoad(i);
        });
    }
    window.onload = function() {
        if (window.jQuery === undefined) loadNextJQ();
        else {
            // Load libraries that rely on jQuery
            if (typeof(libs) == "object") {
                $.each(libs, function() {
                    loadJS(this.toString());
                });
            }
        }
    }
    if (i > 0) loadNextJQ();
}

function loadJS(src, callback) {
    var s = document.createElement('script');
    s.src = src;
    s.async = true;
    s.onreadystatechange = s.onload = function() {
        var state = s.readyState;
        try {
            if (!callback.done && (!state || /loaded|complete/.test(state))) {
                callback.done = true;
                callback();
            }
        } catch (e) {
            // do nothing, no callback function passed
        }
    };
    s.onerror = function() {
        try {
            if (!callback.done) {
                callback.done = true;
                callback();
            }
        } catch (e) {
            // do nothing, no callback function passed
        }
    }
    document.getElementsByTagName('head')[0].appendChild(s);
}

/*
 * The part that actually calls above
 */

if (window.readyState) { //older microsoft browsers
    window.onreadystatechange = function() {
        if (this.readyState == 'complete' || this.readyState == 'loaded') {
            cascadeJQLoad();
        }
    }
} else { //modern browsers
    cascadeJQLoad();
}

2

Google होस्ट किया गया jQuery

  • यदि आप पुराने ब्राउज़रों की परवाह करते हैं, तो प्राथमिक रूप से IE9 से पहले के संस्करण, यह सबसे व्यापक रूप से संगत jQuery का संस्करण है
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  • अगर आपको Oldie की परवाह नहीं है, तो यह छोटा और तेज़ है:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

बैकअप / फ़ॉलबैक प्लान!

  • किसी भी तरह से, आपको Google CDN के विफल होने (असंभावित) होने पर या स्थानीय रूप से उस स्थान पर अवरोधित कर दिया जाना चाहिए जहां आपके उपयोगकर्ता ईरान या कभी-कभी चीन की तरह (थोड़ी अधिक संभावना) से आपकी साइट तक पहुंचते हैं।
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>if (!window.jQuery) { document.write('<script src="/path/to/your/jquery"><\/script>'); }
</script>

संदर्भ: http://webookspeedoptimifications.com/ContentDeliveryNetworkPost.aspx


असुरक्षित प्रोटोकॉल पर लोडिंग स्क्रिप्ट पर XSS हमला वेक्टर खोलता है।
जोश हब्दास

2

मेरा मानना ​​है कि स्ट्रिंग में अंतिम <to to x3C से बचना चाहिए। जब ब्राउज़र देखता है, तो वह इसे स्क्रिप्ट ब्लॉक का अंत मानता है (क्योंकि HTML पार्सर को जावास्क्रिप्ट के बारे में कोई पता नहीं है, यह उस चीज के बीच अंतर नहीं कर सकता है जो बस एक स्ट्रिंग में दिखाई देता है, और कुछ ऐसा है जो वास्तव में स्क्रिप्ट को समाप्त करने के लिए है। तत्व)। तो जावास्क्रिप्ट में शाब्दिक रूप से दिखाई देना एक HTML पेज के अंदर होगा (सबसे अच्छा मामले में) त्रुटियों का कारण बनता है, और (सबसे खराब स्थिति में) एक बड़ा सुरक्षा छेद होगा।

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.0.0.min.js">\x3C/script>')</script>

2
if (typeof jQuery == 'undefined')) { ...

या

if(!window.jQuery){

Cdn संस्करण लोड नहीं होने पर काम नहीं करेगा, क्योंकि ब्राउज़र इस स्थिति के माध्यम से चलेगा और इसके दौरान अभी भी बाकी javascripts को डाउनलोड करना होगा जिसे jQuery की आवश्यकता है और यह त्रुटि देता है। समाधान उस स्थिति के माध्यम से स्क्रिप्ट को लोड करना था।

    <script src="http://WRONGPATH.code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script><!--  WRONGPATH for test-->
  <script type="text/javascript">
  function loadCDN_or_local(){
    if(!window.jQuery){//jQuery not loaded, take a local copy of jQuery and then my scripts
      var scripts=['local_copy_jquery.js','my_javascripts.js'];
      for(var i=0;i<scripts.length;i++){
      scri=document.getElementsByTagName('head')[0].appendChild(document.createElement('script'));
      scri.type='text/javascript';
      scri.src=scripts[i];
    }
  }
  else{// jQuery loaded can load my scripts
    var s=document.getElementsByTagName('head')[0].appendChild(document.createElement('script'));
    s.type='text/javascript';
    s.src='my_javascripts.js';
  }
  }
  window.onload=function(){loadCDN_or_local();};
  </script>

मुझे Google Chrome - कैशिंग में स्क्रिप्ट के परीक्षण में एक समस्या मिली। इसलिए स्थानीय परीक्षण के लिए src को s.src = 'my_javascripts.js' + ';' + Math.floor (Math.random () * 10001) जैसे किसी अन्य अनुभाग में बदलें;
मिरेक कोमरेक

Cdn संस्करण लोड न होने पर एलेक्स का जवाब काम नहीं करेगा, क्योंकि ब्राउज़र इस स्थिति से गुजरेगा और इसके दौरान बाकी के javascripts को डाउनलोड करना होगा जिसमें jquery की आवश्यकता होती है और यह त्रुटि देता है -> जावास्क्रिप्ट फ़ाइलों को डाउनलोड किया जा रहा है, कोड के अगले टुकड़े को दौड़ाया जाएगा इसलिए यह कोई मुद्दा नहीं है
एलेक्स

2

लगभग सभी सार्वजनिक CDN बहुत मज़बूती से हैं। हालाँकि, यदि आप अवरुद्ध Google डोमेन के बारे में चिंतित हैं, तो आप बस एक वैकल्पिक jQuery CDN से कमबैक कर सकते हैं । हालाँकि, ऐसे मामले में, आप इसे विपरीत तरीके से करना पसंद कर सकते हैं और असफल अनुरोधों और प्रतीक्षा समय से बचने के लिए Google सीडीएन के लिए अपने पसंदीदा विकल्प और वापसी के रूप में कुछ अन्य सीडीएन का उपयोग करें:

<script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js"></script>
<script>
   window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><\/script>');
</script>

1

ASP.NET में रेजर सिंटैक्स का उपयोग करते हुए, यह कोड फ़ॉलबैक समर्थन प्रदान करता है और वर्चुअल रूट के साथ काम करता है:

@{var jQueryPath = Url.Content("~/Scripts/jquery-1.7.1.min.js");}
<script type="text/javascript">
    if (typeof jQuery == 'undefined')
        document.write(unescape("%3Cscript src='@jQueryPath' type='text/javascript'%3E%3C/script%3E"));
</script>

या एक सहायक बनाएं ( सहायक अवलोकन ):

@helper CdnScript(string script, string cdnPath, string test) {
    @Html.Raw("<script src=\"http://ajax.aspnetcdn.com/" + cdnPath + "/" + script + "\" type=\"text/javascript\"></script>" +
        "<script type=\"text/javascript\">" + test + " || document.write(unescape(\"%3Cscript src='" + Url.Content("~/Scripts/" + script) + "' type='text/javascript'%3E%3C/script%3E\"));</script>")
}

और इसे इस तरह उपयोग करें:

@CdnScript("jquery-1.7.1.min.js", "ajax/jQuery", "window.jQuery")
@CdnScript("jquery.validate.min.js", "ajax/jquery.validate/1.9", "jQuery.fn.validate")

मैंने रेज़र के बारे में कभी भी दिल नहीं दिया है, लेकिन यह एक ओबफ्यूसेटर की तरह दिखता है, सिवाय इसके कि यह कोड को छोटे की तुलना में लंबा बनाता है (यह दो बार ऐसा है
maaartinus

@maaartinus: यह सेब से सेब की तुलना नहीं है। बेंजामिनआरएच का उत्तर, जिसे आप संदर्भित करते हैं, एकल सीडीएन-होस्टेड स्क्रिप्ट के लिए है। CdnScriptसहायक के साथ , आपको प्रति स्क्रिप्ट कोड की केवल एक पंक्ति की आवश्यकता है । आपके पास जितनी अधिक स्क्रिप्ट हैं, उतना ही बड़ा भुगतान।
एडवर्ड ब्रे

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

@maaartinus: चूंकि प्रत्येक CDN स्क्रिप्ट लोड स्वतंत्र रूप से विफल हो सकता है, इसलिए आपको प्रत्येक लोड को अलग से जांचना होगा। CDN बनाम स्थानीय रूप से सभी लिपियों को लोड करने के बाद एकल CDN जाँच का कोई विश्वसनीय तरीका नहीं है।
एडवर्ड ब्रे

मामला जो मुझे चिंतित करता है वह सीडीएन साइट की विफलता है जो कई भारों के लिए प्रतीक्षा करने के लिए अग्रणी है। इसलिए मुझे कुछ पसंद है try { for (Script s : ...) cdnLoad(s); } catch (...) { for (Script s : ...) ownLoad(s); }ifएस के एक समूह में इसका अनुवाद करना एक बुरा सपना हो सकता है।
माॅर्टिनस

1

यद्यपि लेखन document.write("<script></script>")jQuery बैकऑफ़ के लिए आसान लगता है, क्रोम उस मामले में सत्यापन त्रुटि देता है। इसलिए मैं "स्क्रिप्ट" शब्द को तोड़ना पसंद करता हूं। तो यह ऊपर की तरह सुरक्षित हो जाता है।

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script>if (typeof jQuery === "undefined") {
   window.jqFallback = true;
   document.write("<scr"+"ipt src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js'></scr"+"ipt>");
} </script>

दीर्घकालिक मुद्दों के लिए, JQuery की कमियां लॉग करना बेहतर होगा। उपरोक्त कोड में, यदि पहले CDN उपलब्ध नहीं है, तो JQuery दूसरे CDN से लोड किया गया है। लेकिन आप उस गलत सीडीएन को जानना चाहते हैं और इसे स्थायी रूप से हटा सकते हैं। (यह मामला बहुत ही असाधारण मामला है) इसके अलावा कमबैक मुद्दों को लॉग करना बेहतर है। तो आप AJAX के साथ गलत मामले भेज सकते हैं। JQuery परिभाषित नहीं होने के कारण, आपको AJAX अनुरोध के लिए वेनिला जावास्क्रिप्ट का उपयोग करना चाहिए।

<script type="text/javascript">
    if (typeof jQuery === 'undefined' || window.jqFallback == true) {
        // XMLHttpRequest for IE7+, Firefox, Chrome, Opera, Safari
        // ActiveXObject for IE6, IE5
        var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        var url = window.jqFallback == true ? "/yourUrl/" : "/yourUrl2/";
        xmlhttp.open("POST", url, true);
        xmlhttp.send();
    }
</script>

1

आपके नियंत्रण से परे बाहरी डेटा स्टोर से संसाधन को लोड करने में असमर्थता मुश्किल है। लापता कार्यों की तलाश में समय समाप्त होने से बचने के साधन के रूप में पूरी तरह से निराशाजनक है, जैसा कि यहां वर्णित है: http://www.tech-101.com/support/topic/4499-issues-using-a-cdn/


0

अभी तक एक और कमबैक जो ajax.googleapis.com को cdnjs.cloudflare.com के साथ बदल देता है :

(function (doc, $)
{
    'use strict';

    if (typeof $ === 'undefined')
    {
        var script = doc.querySelector('script[src*="jquery.min.js"]'),
            src = script.src.replace('ajax.googleapis.com', 'cdnjs.cloudflare.com');

        script.parentNode.removeChild(script);
        doc.write('<script src="' + src + '"></script>');
    }
})(document, window.jQuery || window.Zepto);
  • आप स्ट्रिंग में निर्दिष्ट करके एक jQuery संस्करण से चिपक सकते हैं
  • एसेट मैनेजमेंट के लिए बिल्कुल सही जो HTML स्निप्स के साथ काम नहीं करता है
  • जंगली में परीक्षण किया गया - चीन के उपयोगकर्ताओं के लिए एकदम सही है

क्या आप निम्नलिखित कथन पर विस्तार से बता सकते हैं: "आपको jQuery संस्करण की परवाह नहीं है"?
जोश हब्दास

संस्करण उस URL का हिस्सा है जो इस दृष्टिकोण द्वारा छुआ जाने वाला नहीं है ... jquery / 3.xx / jquery.min.js
redaxmedia

1
जब jQuery 4 संस्करण में बदल जाता है और पीछे असंगत परिवर्तन का परिचय देता है तो क्या यह टूटने का कारण बनता है?
जोश हब्दास

-1 क्योंकि कि टूटने का कारण होगा अगर jQuery ब्रेकिंग परिवर्तनों का परिचय देता है कि आपकी स्क्रिप्ट अभी तक समर्थन नहीं करेगी जब तक कि संस्करण निर्दिष्ट नहीं किया गया है।
देखोजी

@lookaji मुझे लगता है कि आप फॉलबैक को नहीं समझते हैं। यह उस डोमेन को प्रतिस्थापित करता है जहां यह होस्ट किया गया है और फ़ाइल नाम / संस्करण को बिल्कुल भी स्पर्श नहीं करता है।
redaxmedia

0

आप जैसे कोड का उपयोग कर सकते हैं:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>window.jQuery || document.write('<script type="text/javascript" src="./scripts/jquery.min.js">\x3C/script>')</script>

लेकिन ऐसी लाइब्रेरी भी हैं जिनका उपयोग आप अपनी स्क्रिप्ट के लिए कई संभावित कमियों को सेट करने और लोडिंग प्रक्रिया को अनुकूलित करने के लिए कर सकते हैं:

  • basket.js
  • RequireJS
  • yepnope

उदाहरण:

basket.js मैं अब के लिए सबसे अच्छा संस्करण लगता है। आपकी स्क्रिप्ट को लोकलस्टोरेज में कैच करेगा, जिससे अगले लोडिंग में तेजी आएगी। सबसे सरल कॉल:

basket.require({ url: '/path/to/jquery.js' });

यह एक वादा वापस करेगा और आप त्रुटि पर अगली कॉल कर सकते हैं, या सफलता पर निर्भरता लोड कर सकते हैं:

basket
    .require({ url: '/path/to/jquery.js' })
    .then(function () {
        // Success
    }, function (error) {
        // There was an error fetching the script
        // Try to load jquery from the next cdn
    });

RequireJS

requirejs.config({
    enforceDefine: true,
    paths: {
        jquery: [
            '//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min',
            //If the CDN location fails, load from this location
            'js/jquery-2.0.0.min'
        ]
    }
});

//Later
require(['jquery'], function ($) {
});

yepnope

yepnope([{
  load: 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('js/jquery-2.0.0.min.js');
    }
  }
}]);
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.