जावास्क्रिप्ट विजेट को एम्बेड करने के लिए कैसे करें जो अज्ञात वातावरण में jQuery पर निर्भर करता है

Question

मैं एक जावास्क्रिप्ट विजेट विकसित कर रहा हूं जो jQuery पर निर्भर करता है। विजेट को उस पृष्ठ पर लोड किया जा सकता है या नहीं जिसे पहले से ही jQuery लोड किया गया है। इस मामले में कई समस्याएं आ रही हैं ...

1. यदि वेब पेज में jQuery नहीं है, तो मुझे अपना स्वयं का jQuery लोड करना होगा। हालांकि, ऐसा करते समय एक नाजुक समय मुद्दा लगता है। उदाहरण के लिए, यदि मेरा विजेट लोड होने और निष्पादित करने से पहले मेरा विजेट लोड और निष्पादित करता है, तो मुझे jQuery is not defined त्रुटि मिलती है।

2. यदि वेब पेज में jQuery है, तो मैं आमतौर पर इसके साथ काम कर सकता हूं। यदि jQuery संस्करण पुराना है, हालांकि, मैं अपना खुद का लोड करना चाहता हूं। अगर मैं अपना खुद का भार लेता हूं, हालांकि, मुझे ऐसा करने की ज़रूरत है कि वे अपने $ चर पर स्टंप न करें। अगर मैं jQuery.noConflict() सेट करता हूं और उनकी कोई भी स्क्रिप्ट $ पर निर्भर करती है, तो मैंने अभी अपना पृष्ठ तोड़ दिया है।

3. यदि वेब पेज किसी अन्य जावास्क्रिप्ट लाइब्रेरी (उदा। प्रोटोटाइप) का उपयोग करता है, तो मुझे प्रोटोटाइप के $ चर के संवेदनशील होने की आवश्यकता होती है।

उपर्युक्त सभी के कारण, यह jQuery पर निर्भर नहीं है। लेकिन इससे पहले कि मैं उस सड़क पर जाउंगा, जिसमें ज्यादातर मेरे विजेट कोड को फिर से लिखना शामिल होगा, मैं पहले सलाह मांगना चाहता था।

मेरी कोड के बुनियादी कंकाल, समय बग और कभी कभी $ कीड़े सहित, इस प्रकार है:

<script type="text/javascript" charset="utf-8"> 
// <![CDATA 
if (typeof jQuery === 'undefined') { 
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = '{{ URL }}/jquery.js'; 
    head.appendChild(script); 
} 
// ]]> 
</script> 
<script type="text/javascript" src="{{ URL }}/widget.js"></script> 

मेरे विजेट निम्नलिखित संरचना है:

(function($) { 
var mywidget = { 
    init: function() { 
    ... 
    } 
}; 
$(document).ready(function() { 
    mywidget.init(); 
}); 
})(jQuery); 

अगर कोई संकेत या संसाधन हैं एक विजेट प्राप्त करने के लिए जो सभी उल्लिखित वातावरण में काम कर सकता है, उनकी बहुत सराहना की जाएगी।

Answer 1

कुछ उत्तर और संकेत की समीक्षा करने, और कुछ उपयोगी खोजने के बाद jQuery हैकर्स, मैं की तरह कुछ के साथ समाप्त हो गया है:

(function(window, document, version, callback) { 
    var j, d; 
    var loaded = false; 
    if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "/media/jquery.js"; 
     script.onload = script.onreadystatechange = function() { 
      if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) { 
       callback((j = window.jQuery).noConflict(1), loaded = true); 
       j(script).remove(); 
      } 
     }; 
     (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script); 
    } 
})(window, document, "1.3", function($, jquery_loaded) { 
    // Widget code here 
}); 

यह jQuery लोड करता है, तो यह पहले से ही भरी हुई नहीं है और कॉलबैक में यह समाहित होगा तो यह संघर्ष नहीं है पृष्ठ पर एक पूर्व मौजूदा jQuery के साथ। यह भी जांचता है कि न्यूनतम संस्करण उपलब्ध है या अन्यथा एक ज्ञात संस्करण लोड करता है - इस मामले में, v1.3। यह कॉलबैक (मेरा विजेट) पर एक बूलियन मान भेजता है कि क्या कोई ट्रिगर्स बनाने की आवश्यकता होने पर jQuery लोड किया गया था या नहीं। और केवल jQuery लोड होने के बाद ही यह मेरे विजेट को कॉल करता है, इसमें jQuery को गुजरता है।

Answer 2

मैं jQuery स्रोत डाउनलोड करता हूं और jQuery ऑब्जेक्ट को किसी अन्य (jQueryCustom) में संशोधित करता हूं।

और फिर उस उदाहरण को ढूंढें जो $ प्रतीक को jQuery ऑब्जेक्ट के रूप में सेट करता है और नियमित रूप से टिप्पणी करता है।

मुझे नहीं पता कि यह कितना आसान या मुश्किल हो सकता है, लेकिन मुझे यकीन है कि यह कोशिश करें।

(इसके अलावा, अपना दूसरा विकल्प जांचें, क्योंकि यह बुरा नहीं है, साइट जहां विजेट निष्पादित होगा, आपके पास आवश्यकतानुसार एक jQuery संस्करण पुराना हो सकता है)।

संपादित करें: मैंने अभी स्रोत की जांच की है। आपको बस jQuery को अन्य स्ट्रिंग के साथ प्रतिस्थापित करना होगा (उदाहरण के लिए jQcustom)। फिर, इस लाइन टिप्पणी का प्रयास करें:

_$ = window.$ 

और आप इस तरह कस्टम jQuery के संदर्भ:()

jQcustom("#id").attr(...) 

Answer 3

देखें Can I use multiple versions of jQuery on the same page?

Answer 4

आप document.write का उपयोग कर सकते हैं जोड़ने के लिए वैकल्पिक करने के लिए पृष्ठ पर jQuery स्क्रिप्ट? यह jQuery को सिंक्रनाइज़ लोड करने के लिए मजबूर होना चाहिए।इस प्रयास करें:

<script type="text/javascript" charset="utf-8"> 
// <![CDATA 
if (typeof jQuery === 'undefined') { 
    document.write('<script src="{{ URL }}/jquery.js"><' + '/script>'); 
} 
// ]]> 
</script> 
<script type="text/javascript" src="{{ URL }}/widget.js"></script> 

आप अपने विजेट स्क्रिप्ट के अंदर jQuery जांच करना चाहते हैं तो मेरा मानना ​​है कि निम्न काम करता है पार ब्राउज़र:

(function() { 
function your_call($) { 
    // your widget code goes here 
} 
if (typeof jQuery !== 'undefined') your_call(jQuery); 
else { 
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = '{{ URL }}/jquery.js'; 
    var onload = function() { 
    if (!script.readyState || script.readyState === "complete") your_call(jQuery); 
    } 
    if ("onreadystatechange" in script) script.onreadystatechange = onload; 
    else script.onload = onload; 
    head.appendChild(script); 
} 
})() 

Answer 5

क्या होगा यदि आप कुछ jQuery प्लगइन का उपयोग भी करना चाहते हैं? क्या प्लगइन के minified संस्करणों के साथ खुद को एक फ़ाइल बनाने के लिए सुरक्षित है, और नीचे भी लोड करें? (एस 3 से लोड किया गया, इस विशिष्ट उदाहरण में।)

(function(window, document, version, callback) { 
    var j, d; 
    var loaded = false; 
    if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"; 
    script.onload = script.onreadystatechange = function() { 
     if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) { 
      window.jQuery.getScript('http://mydomain.s3.amazonaws.com/assets/jquery-plugins.js', function() { 
       callback((j = window.jQuery).noConflict(1), loaded = true); 
       j(script).remove(); 
      }); 
     } 
    }; 
    document.documentElement.childNodes[0].appendChild(script) 
    } 
})(window, document, "1.5.2", function($, jquery_loaded) { 
    // widget code goes here 
}); 

Answer 6

एलेक्स Marandon द्वारा How to build a web widget (using jQuery) देखें।

(function() { 

// Localize jQuery variable 
var jQuery; 

/******** Load jQuery if not present *********/ 
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') { 
    var script_tag = document.createElement('script'); 
    script_tag.setAttribute("type","text/javascript"); 
    script_tag.setAttribute("src", 
     "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"); 
    if (script_tag.readyState) { 
     script_tag.onreadystatechange = function() { // For old versions of IE 
      if (this.readyState == 'complete' || this.readyState == 'loaded') { 
       scriptLoadHandler(); 
      } 
     }; 
    } else { // Other browsers 
     script_tag.onload = scriptLoadHandler; 
    } 
    // Try to find the head, otherwise default to the documentElement 
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
} else { 
    // The jQuery version on the window is the one we want to use 
    jQuery = window.jQuery; 
    main(); 
} 

/******** Called once jQuery has loaded ******/ 
function scriptLoadHandler() { 
    // Restore $ and window.jQuery to their previous values and store the 
    // new jQuery in our local jQuery variable 
    jQuery = window.jQuery.noConflict(true); 
    // Call our main function 
    main(); 
} 

/******** Our main function ********/ 
function main() { 
    jQuery(document).ready(function($) { 
     // We can use jQuery 1.4.2 here 
    }); 
} 

})(); // We call our anonymous function immediately 

Answer 7

मुझे पता है कि यह एक पुराना विषय है ... लेकिन मुझे कुछ है जो आपके हैक को मिला है। अपने विजेट में प्रयास करें

"init": function() 

कि मुसीबत ठीक कर देंगे