अगर ट्विटर बूटस्ट्रैप लोड किया गया है तो कैसे जांचें?


85

मैं यह कैसे जांच सकता हूं कि क्या पेज पर लोड किया गया एक बूटस्ट्रैप है। (एक फाइल बूटस्ट्रैप.जेएस को दूसरी बड़ी जेएस फाइल में संकलित किया जा सकता है)?

जवाबों:


124

अगर आपको बूटस्ट्रैप-विशिष्ट विधि उपलब्ध है, तो आपको बस जांच करनी होगी। मैं इस उदाहरण में मोडल का उपयोग करूँगा (बूटस्ट्रैप 2-4 के लिए काम करता है):

// Will be true if bootstrap is loaded, false otherwise
var bootstrap_enabled = (typeof $().modal == 'function');

यह स्पष्ट रूप से 100% विश्वसनीय नहीं है क्योंकि एक अलग फ़ंक्शन द्वारा एक मोडल फ़ंक्शन प्रदान किया जा सकता है, लेकिन फिर भी यह काम करेगा ...

आप बूटस्ट्रैप 3-4 के लिए विशेष रूप से जांच कर सकते हैं (3.1+ के रूप में काम करता है):

// Will be true if Bootstrap 3-4 is loaded, false if Bootstrap 2 or no Bootstrap
var bootstrap_enabled = (typeof $().emulateTransitionEnd == 'function');

ध्यान दें कि इन सभी चेकों की आवश्यकता है कि jQuery पहले से लोड है


धन्यवाद! cdnjs से लोकल फॉलबैक के साथ बूटस्ट्रैप लोड करने के लिए बहुत आसान है
ptim

1
आपको इसके अलावा कुछ का उपयोग करना चाहिए .modal..... उस उदाहरण के साथ सभी जगह झूठी सकारात्मकता।
ढपिन

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

1
अधिकांश भाग के लिए काम करना चाहिए, लेकिन उन पैकेजों से थके हुए हों जिनमें समान नाम वाले jQuery प्लगइन्स शामिल हैं।
एडम एफ

2
@ वरन मैंने इस var bootstrap_enabled = (typeof $) (modal == 'function') का उपयोग करने की कोशिश की; Jquery के बिना इसका उपयोग कैसे करें? मेरा jquery बूटस्ट्रैप की जाँच के समय लोड नहीं किया गया है इसलिए यह मुझे $ अपरिभाषित त्रुटि दे रहा है।
आईआईटी २०१० i१

25

मैं विशिष्ट बूटस्ट्रैप प्लगइन की जांच करूंगा क्योंकि मोडल या टूलटिप बहुत आम हैं, इसलिए

if(typeof($.fn.popover) != 'undefined'){
 // your stuff here
}

या

 if (typeof $.fn.popover == 'function') { 
   // your stuff here
  }

दोनों बूटस्ट्रैप संस्करणों में काम करता है


मुझे लगता है कि यह सबसे अच्छा जवाब है और वर्तमान जावास्क्रिप्ट-लाइन के साथ पूरे ढांचे की तलाश करने के बजाय सुविधा-समर्थन से संबंधित है।
फिल

5

if (typeof([?])=='undefined') { /*bootstrap is not loaded */}

जहाँ [?] कोई भी वस्तु या नाम स्थान होगा जो जेएस फ़ाइल के अंदर परिभाषित है।

जावास्क्रिप्ट में "सहित" की अवधारणा मौजूद नहीं है।


6
उदाहरण के लिएif(typeof($.fn.modal) === 'undefined')
ऑफर्मो

5

Https://github.com/netdna/bootstrap-cdn/issues/111#issuecomment-14-1467671 देखें

<script type="text/javascript">
    // <![CDATA[
    (function($){

        function verifyStyle(selector) {//http://stackoverflow.com/a/983817/579646
            var rules;
            var haveRule = false;

            if (typeof document.styleSheets != "undefined") {   //is this supported
                var cssSheets = document.styleSheets;

                outerloop:
                for (var i = 0; i < cssSheets.length; i++) {

                     //using IE or FireFox/Standards Compliant
                    rules =  (typeof cssSheets[i].cssRules != "undefined") ? cssSheets[i].cssRules : cssSheets[i].rules;

                     for (var j = 0; j < rules.length; j++) {
                         if (rules[j].selectorText == selector) {
                                 haveRule = true;
                                break outerloop;
                         }
                    }//innerloop

                }//outer loop
            }//endif

            return haveRule;
        }//eof

        <!-- BOOTSTRAP JS WITH LOCAL FALLBACK-->
        if(typeof($.fn.modal) === 'undefined') {document.write('<script src="<?=$path_js?>/bootstrap.min.js"><\/script>')}

        <!-- BOOTSTRAP CDN FALLBACK CSS-->
        $(document).ready(function() {

            if( verifyStyle('form-inline') )
            {
                $("head").prepend("<link rel='stylesheet' href='<?=$path_css?>bootstrap.min.css' type='text/css' media='screen'>");
            }
            else
            {
                //alert('bootstrap already loaded');
            }
        });
    })(jQuery);
    // ]]>
    </script>

jQuery के सुरक्षित मोड के साथ संगत,

अगर आप कस्टम css का उपयोग करते हैं तो css चेक को ट्विक्स की आवश्यकता हो सकती है


4

AFAIK, लघु उत्तर है

यह पता लगाना संभव नहीं है कि ट्विटर बूटस्ट्रैप लोड किया गया है या नहीं

विवरण

Twitter बूटस्ट्रैप अनिवार्य रूप से css है और js प्लगइन्स से jquery तक का सेट है। प्लगइन नाम $ .fn.button की तरह सामान्य हैं और उपयोग करने के लिए प्लगइन्स का सेट भी अनुकूलन योग्य हैं। सिर्फ नाम से प्लगइन की उपस्थिति यह पता लगाने में मदद नहीं करेगी कि बूटस्ट्रैप मौजूद है।


2

आप <script>तत्वों को पुनः प्राप्त कर सकते हैं और उनकी src विशेषता की जांच कर सकते हैं लेकिन जैसा कि आपने बताया है, आप जो देख रहे हैं वह कोड ही है न कि फ़ाइल का नाम जैसा कि कोड किसी भी फ़ाइल में हो सकता है।

एक जावास्क्रिप्ट सेवा / वर्ग / आदि का पता लगाने का सबसे अच्छा तरीका है। पृष्ठ में लोड किया गया है, DOM में कुछ देखना है जिसे आप जानते हैं कि दिए गए JS द्वारा लोड किया गया है।

उदाहरण के लिए अगर jQuery लोड हो गया है, तो आप null !== window.jQueryलोड किए गए jQuery के संस्करण का पता लगा सकते हैं या कर सकते हैं ,jQuery.prototype.jquery


0

मुझे यह करने का सबसे आसान तरीका लगता है। जहाँ तक सीएसएस है मुझे यकीन नहीं है कि ऐसा करने का एक सरल तरीका है।

<script>typeof Alert !== 'undefined' || document.write('<script src="/js/bootstrap/bootstrap.min.js">\x3C/script>')</script>


-3

यदि आप इसे कंसोल में टाइप करते हैं, तो यह jQuery संस्करण को आउटपुट करेगा: console.log(jQuery().jquery);

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.