Jak sprawdzić, czy załadowano bootstrap Twittera?

85

Jak mogę sprawdzić, czy na stronie jest załadowany plik bootstrap.js (plik bootstrap.js może zostać wkompilowany w inny duży plik JS)?

Igor T.
źródło

Odpowiedzi:

124

Wszystko, co musisz zrobić, to po prostu sprawdzić, czy dostępna jest metoda specyficzna dla Bootstrap. W tym przykładzie użyję modalu (działa dla Bootstrap 2-4):

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

Oczywiście nie jest to w 100% niezawodne, ponieważ funkcja modalna może być zapewniana przez inną wtyczkę, ale mimo to wykona zadanie ...

Możesz również sprawdzić dokładniej Bootstrap 3-4 (działa od 3.1+):

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

Zauważ, że wszystkie te sprawdzenia wymagają, aby jQuery był już załadowany .

Aron
źródło
dzięki! bardzo przydatny do ładowania bootstrap z cdnjs z lokalną
rezerwą
1
Powinieneś używać czegoś innego niż .modal..... Fałszywe pozytywy wszędzie w tym przykładzie.
dhaupin
Tak, fałszywe alarmy są możliwe, to prawda. Niestety, większość możliwych sprawdzeń ma dość ogólną nazwę w Bootstrap, więc trudno jest uniknąć tego problemu, ale być może bardziej niejasnym jest scrollspy.noConflict. Zatem sprawdzenie, czy istnieją zarówno scrollspy, jak i noConflict, może być mniej podatne na fałszywe alarmy. Możesz także połączyć kilka różnych testów, aby uczynić go jeszcze bardziej niezawodnym.
Aron,
1
Powinno działać w większości, ale należy mieć dość pakietów, które zawierają wtyczki jQuery o identycznych nazwach.
Adam F
2
@aron Próbowałem użyć tego var bootstrap_enabled = (typeof $ (). modal == 'function'); Jak z niego korzystać bez jQuery? Moje jquery nie jest ładowane w czasie sprawdzania bootstrapu, więc daje mi niezdefiniowany błąd.
iit2011081
25

Wolałbym raczej sprawdzić konkretną wtyczkę bootstrap, ponieważ modalne lub podpowiedzi są bardzo powszechne, więc

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

lub

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

działa w obu wersjach bootstrap

Benn
źródło
Myślę, że jest to najlepsza odpowiedź i zgodnie z obecnym myśleniem JavaScript, że zajmuje się obsługą funkcji, a nie szuka całych frameworków.
Phil
5

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

gdzie [?] oznaczałoby dowolny obiekt lub przestrzeń nazw zdefiniowaną w samym pliku JS.

Pojęcie „włączania” nie istnieje w javascript.

Alex
źródło
6
Na przykładif(typeof($.fn.modal) === 'undefined')
Offirmo
5

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

kompatybilny z trybem awaryjnym jQuery,

css może wymagać poprawek, jeśli używasz niestandardowego css

max4ever
źródło
4

AFAIK, krótka odpowiedź brzmi

Nie jest możliwe wykrycie, czy załadowano bootstrap Twittera

Detale

Program ładujący na Twitterze to w zasadzie css i zestaw wtyczek js do jquery. Nazwy wtyczek są ogólne, takie jak $ .fn.button, a zestaw wtyczek do użycia również można dostosować. Obecność wtyczki tylko z nazwy nie pomogłaby w stwierdzeniu, że bootstrap jest obecny.

zamknięcie
źródło
2

Możesz pobrać <script>elementy i sprawdzić ich atrybut src, ale jak zauważyłeś, szukasz samego kodu, a nie nazwy pliku, ponieważ kod może znajdować się w dowolnym pliku.

Najlepszy sposób na wykrycie, czy usługa / klasa / etc JavaScript. jest ładowany na stronie, polega na wyszukaniu czegoś w DOM, o czym wiesz, że jest ładowane przez dany JS.

Np. Aby wykryć, czy jQuery jest załadowane, możesz to zrobić null !== window.jQuerylub znaleźć wersję załadowanego jQuery,jQuery.prototype.jquery

cudowny
źródło
0

Uważam, że jest to najłatwiejszy sposób na zrobienie tego. Jeśli chodzi o css, nie jestem pewien, czy istnieje prosty sposób na zrobienie tego.

<script>typeof Alert !== 'undefined' || document.write('<script src="/js/bootstrap/bootstrap.min.js">\x3C/script>')</script>
Wzmacniacz
źródło
0

Dodaj link bootstrap i zwróć uwagę na zmianę w tagu h1.

Md Pervez Nawaz
źródło
-3

Jeśli wpiszesz to w konsoli, wyświetli się wersja jQuery: console.log(jQuery().jquery);

Colette
źródło