Wie überprüfe ich, ob Twitter Bootstrap geladen ist?

85

Wie kann ich überprüfen, ob auf der Seite eine bootstrap.js geladen ist (eine Datei bootstrap.js kann in eine andere große JS-Datei kompiliert werden)?

Igor T.
quelle

Antworten:

122

Sie müssen lediglich prüfen, ob eine Bootstrap-spezifische Methode verfügbar ist. In diesem Beispiel werde ich Modal verwenden (funktioniert für Bootstrap 2-4):

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

Es ist offensichtlich nicht 100% zuverlässig, da eine modale Funktion von einem anderen Plugin bereitgestellt werden kann, aber es wird trotzdem die Arbeit erledigen ...

Sie können auch genauer nach Bootstrap 3-4 suchen (funktioniert ab 3.1+):

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

Beachten Sie, dass für alle diese Überprüfungen jQuery bereits geladen sein muss .

Aron
quelle
Vielen Dank! Sehr praktisch zum Laden von Bootstrap von CDNJs mit einem lokalen Fallback
ptim
1
Sie sollten etwas anderes verwenden .modal..... False Positives überall mit diesem Beispiel.
Dhaupin
Ja, Fehlalarme sind möglich, das ist wahr. Leider werden die meisten möglichen Überprüfungen in Bootstrap ziemlich allgemein benannt, so dass es schwierig ist, dieses Problem zu vermeiden, aber vielleicht ist scrollspy.noConflict eine dunkelere. Die Überprüfung, ob sowohl Scrollspy als auch NoConflict vorhanden sind, kann daher weniger anfällig für Fehlalarme sein. Sie können auch mehrere verschiedene Prüfungen kombinieren, um die Zuverlässigkeit noch zu erhöhen.
Aron
1
Sollte größtenteils funktionieren, aber müde von Paketen sein, die jQuery-Plugins mit identischen Namen enthalten.
Adam F
2
@aron Ich habe versucht, diese var bootstrap_enabled = (typeof $ (). modal == 'function') zu verwenden; Wie benutzt man es ohne jquery? Meine jquery ist zum Zeitpunkt der Überprüfung des Bootstraps nicht geladen, daher wird mir ein $ undefined-Fehler angezeigt.
iit2011081
25

Ich würde lieber nach einem bestimmten Bootstrap-Plugin suchen, da Modal oder Tooltip sehr verbreitet sind

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

oder

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

funktioniert in beiden Bootstrap-Versionen

Benn
quelle
Ich denke, dies ist die beste Antwort und entspricht dem aktuellen JavaScript-Gedanken, sich eher mit der Unterstützung von Funktionen zu befassen, als nach ganzen Frameworks zu suchen.
Phil
5

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

Dabei wäre [?] ein Objekt oder ein Namespace, der in der JS-Datei selbst definiert ist.

Das Konzept des "Einschlusses" existiert in Javascript nicht.

Alex
quelle
6
Zum Beispielif(typeof($.fn.modal) === 'undefined')
Offirmo
5

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

kompatibel mit jQuery abgesicherten Modus,

Die CSS-Prüfung erfordert möglicherweise Anpassungen, wenn Sie benutzerdefiniertes CSS verwenden

max4ever
quelle
4

AFAIK, kurze Antwort ist

Es ist nicht möglich zu erkennen, ob ein Twitter-Bootstrap geladen ist

Einzelheiten

Twitter Bootstrap ist im Wesentlichen CSS und Satz von JS-Plugins zu JQuery. Die Plugin-Namen sind generisch wie $ .fn.button und die zu verwendenden Plugins können ebenfalls angepasst werden. Das Vorhandensein eines Plugins nur mit Namen würde nicht dazu beitragen, festzustellen, ob ein Bootstrap vorhanden ist.

Schließung
quelle
2

Sie können <script>Elemente abrufen und deren src-Attribut überprüfen. Wie Sie bereits betont haben, suchen Sie nach dem Code selbst und nicht nach einem Dateinamen, wie er in einer beliebigen Datei enthalten sein kann.

Der beste Weg, um festzustellen, ob ein JavaScript-Dienst / class / etc. wird in eine Seite geladen, um nach etwas im DOM zu suchen, von dem Sie wissen, dass es von dem angegebenen JS geladen wird.

Um beispielsweise festzustellen, ob jQuery geladen ist, können Sie null !== window.jQuerydie Version der geladenen jQuery ausführen oder herausfinden.jQuery.prototype.jquery

marekful
quelle
0

Ich finde das am einfachsten. Was CSS betrifft, bin ich mir nicht sicher, ob es einen einfachen Weg gibt, dies zu tun.

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

Fügen Sie den Bootstrap-Link hinzu und beachten Sie die Änderung im h1-Tag.

Md Pervez Nawaz
quelle
-3

Wenn Sie dies in die Konsole eingeben, wird die jQuery-Version ausgegeben: console.log(jQuery().jquery);

Colette
quelle