Cum să verificați dacă Twitter bootstrap este încărcat? (Programare, Javascript, Twitter Bootstrap)

Igor T. a intrebat.

Cum pot verifica dacă există un bootstrap.js încărcat pe pagină (un fișier bootstrap.js poate fi compilat într-un alt fișier JS mare)?

9 răspunsuri
Aron

Tot ce trebuie să faceți este pur și simplu să verificați dacă este disponibilă o metodă specifică Bootstrap. Voi folosi modal în acest exemplu (funcționează pentru Bootstrap 2-4):

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

Nu este 100% fiabil, evident, deoarece o funcție modală poate fi furnizată de un alt plugin, dar cu toate acestea va face treaba…

De asemenea, puteți verifica mai specific pentru Bootstrap 3-4 (funcționează începând cu versiunea 3.1+):

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

Rețineți că toate aceste verificări necesită ca jQuery să fie deja încărcat.

Comentarii

  • mulțumiri! foarte util pentru a încărca bootstrap din cdnjs cu un fallback local –  > Por ptim.
  • Ar trebui să folosiți ceva în afară de .modal…..False pozitive peste tot cu acest exemplu. –  > Por dhaupin.
  • Da, falsurile pozitive sunt posibile, acest lucru este adevărat. Din păcate, cele mai multe verificări posibile sunt numite destul de generic în Bootstrap, așa că este dificil de evitat această problemă, dar poate că una mai obscură este scrollspy.noConflict. Astfel, verificarea existenței atât a scrollspy, cât și a noConflict ar putea fi mai puțin predispusă la falsuri pozitive. De asemenea, ați putea combina mai multe verificări diferite pentru a-l face și mai fiabil. –  > Por Aron.
  • Ar trebui să funcționeze în cea mai mare parte, dar fiți atenți la pachetele care includ plugin-uri jQuery cu nume identice. –  > Por Adam F.
  • @aron Am încercat să folosesc acest lucru var bootstrap_enabled = (typeof $().modal == ‘function’); Cum se poate folosi fără jquery ? Jquery-ul meu nu este încărcat în momentul verificării bootstrap, așa că îmi dă o eroare $ undefined. –  > Por iit2011081.
Benn

Aș prefera să verific pentru pluginul specific bootstrap, deoarece modal sau tooltip sunt foarte comune, deci

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

sau

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

funcționează în ambele versiuni de bootstrap

Comentarii

  • Cred că acesta este cel mai bun răspuns și este în conformitate cu gândirea actuală a lui JavaScript de a fi preocupat de suportul de caracteristici mai degrabă decât să caute cadre întregi. –  > Por Phil.
Alex

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

unde [?] ar fi orice obiect sau spațiu de nume care este definit în interiorul fișierului JS în sine.

Conceptul de „inclusiv” nu există în javascript.

Comentarii

  • De exemplu if(typeof($.fn.modal) === 'undefined') –  > Por Offirmo.
max4ever

A se vedea https://github.com/netdna/bootstrap-cdn/issues/111#issuecomment-14467221

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

compatibil cu modul sigur jQuery,

css check ar putea avea nevoie de modificări dacă folosiți css personalizat

închidere

AFAIK, răspunsul scurt este

Nu este posibil să se detecteze dacă twitter bootstrap este încărcat

Detalii

Twitter bootstrap este, în esență, css și un set de plugin-uri js pentru jquery. Numele plugin-urilor sunt generice, cum ar fi $.fn.button, iar setul de plugin-uri de utilizat este, de asemenea, personalizabil. Prezența plugin-ului doar după nume nu ar ajuta la stabilirea faptului că bootstrap este prezent.

marekful

Puteți prelua <script> și să verificați atributul src al acestora, dar, după cum ați subliniat, ceea ce căutați este codul în sine și nu un nume de fișier, deoarece codul poate fi în orice fișier.

Cel mai bun mod de a detecta dacă un serviciu/clasă/etc. JavaScript este încărcat într-o pagină, este să căutați ceva în DOM despre care știți că este încărcat de JS-ul dat.

De exemplu, pentru a detecta dacă jQuery este încărcat, puteți face următoarele operații null !== window.jQuery sau pentru a afla versiunea de jQuery încărcat, jQuery.prototype.jquery

Amplificator

Mi se pare cel mai simplu mod de a face acest lucru. În ceea ce privește css nu sunt sigur că există o modalitate simplă de a face acest lucru.

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

Md Pervez Nawaz

Adăugați link-ul bootstrap și observați schimbarea în tag-ul h1.

Colette

Dacă tastați acest lucru în consolă, se va afișa versiunea jQuery:console.log(jQuery().jquery);