Como verificar se o bootstrap do Twitter está carregado?


86

Como posso verificar se há um bootstrap.js carregado na página (um arquivo bootstrap.js pode ser compilado em outro arquivo JS grande)?

Respostas:


125

Tudo que você precisa fazer é simplesmente verificar se um método específico do Bootstrap está disponível. Vou usar modal neste exemplo (funciona para Bootstrap 2-4):

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

Obviamente, não é 100% confiável, pois uma função modal pode ser fornecida por um plug-in diferente, mas ainda assim fará o trabalho ...

Você também pode verificar o Bootstrap 3-4 mais especificamente (funciona a partir de 3.1+):

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

Observe que todas essas verificações exigem que o jQuery já esteja carregado .


obrigado! muito útil para carregar bootstrap de cdnjs com fallback local
ptim

1
Você deve usar algo além de .modal..... Falsos positivos em todo lugar com esse exemplo.
dhaupin,

Sim, falsos positivos são possíveis, isso é verdade. Infelizmente, a maioria das verificações possíveis tem nomes genéricos no Bootstrap, então é difícil evitar esse problema, mas talvez um mais obscuro seja scrollspy.noConflict. Portanto, verificar se scrollspy e noConflict existem pode ser menos sujeito a falsos positivos. Você também pode combinar várias verificações diferentes para torná-lo ainda mais confiável.
Aron

1
Deve funcionar na maior parte, mas esteja cansado de pacotes que incluem plug-ins jQuery com nomes idênticos.
Adam F

2
@aron Tentei usar esta var bootstrap_enabled = (typeof $ (). modal == 'function'); Como usar sem jquery? Meu jquery não está carregado no momento da verificação do bootstrap, por isso está apresentando o erro $ undefined.
iit2011081

25

Eu prefiro verificar o plug-in de bootstrap específico, pois modal ou dica de ferramenta são muito comuns, então

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

ou

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

funciona em ambas as versões de bootstrap


Acho que essa é a melhor resposta e está de acordo com o pensamento atual do JavaScript de se preocupar com o suporte a recursos, em vez de procurar estruturas inteiras.
Phil

5

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

onde [?] seria qualquer objeto ou namespace definido dentro do próprio arquivo JS.

O conceito de "incluir" não existe em javascript.


6
Por exemploif(typeof($.fn.modal) === 'undefined')
Offirmo de

5

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

compatível com o modo de segurança jQuery,

A verificação de css pode precisar de ajustes se você usar css personalizado


4

AFAIK, a resposta curta é

Não é possível detectar se o bootstrap do Twitter está carregado

Detalhes

O bootstrap do Twitter é essencialmente css e um conjunto de plug-ins js para jquery. Os nomes de plug-ins são genéricos como $ .fn.button e o conjunto de plug-ins a serem usados ​​também é personalizável. A presença do plugin apenas pelo nome não ajudaria a determinar se o bootstrap está presente.


2

Você pode recuperar <script>elementos e verificar seu atributo src, mas como você apontou, o que você está procurando é o próprio código e não um nome de arquivo, pois o código pode estar em qualquer arquivo.

A melhor maneira de detectar se um serviço / classe / etc do JavaScript. é carregado em uma página, é procurar algo no DOM que você sabe que foi carregado pelo JS fornecido.

Por exemplo, para detectar se o jQuery está carregado, você pode fazer null !== window.jQueryou descobrir a versão do jQuery carregado,jQuery.prototype.jquery


0

Acho que essa é a maneira mais fácil de fazer isso. Quanto ao css, não sei se há uma maneira simples de fazer isso.

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


-3

Se você digitar isso no console, a versão do jQuery será gerada: console.log(jQuery().jquery);

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.