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

Igor T.
fonte

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 .

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

Benn
fonte
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.

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

max4ever
fonte
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.

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

marekful
fonte
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>
Amplificador
fonte
0

Adicione o link de bootstrap e observe a mudança na tag h1.

Md Pervez Nawaz
fonte
-3

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

Colette
fonte