¿Cómo comprobar si el bootstrap de Twitter está cargado?


85

¿Cómo puedo comprobar si hay un bootstrap.js cargado en la página (se puede compilar un archivo bootstrap.js en otro archivo JS grande)?

Respuestas:


124

Todo lo que necesita hacer es simplemente verificar si hay un método específico de Bootstrap disponible. Usaré modal en este ejemplo (funciona para Bootstrap 2-4):

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

Obviamente, no es 100% confiable ya que una función modal puede ser proporcionada por un complemento diferente, pero no obstante, hará el trabajo ...

También puede verificar Bootstrap 3-4 más específicamente (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');

Tenga en cuenta que todas estas comprobaciones requieren que jQuery ya esté cargado .


¡Gracias! muy útil para cargar bootstrap desde cdnjs con un respaldo local
ptim

1
Deberías usar algo además de .modal... falsos positivos por todas partes con ese ejemplo.
Dhaupin

Sí, los falsos positivos son posibles, esto es cierto. Desafortunadamente, la mayoría de las comprobaciones posibles tienen un nombre bastante genérico en Bootstrap, por lo que es difícil evitar este problema, pero quizás uno más oscuro sea scrollspy.noConflict. Por lo tanto, comprobar que existen tanto scrollspy como noConflict podría ser menos propenso a falsos positivos. También puede combinar varios controles diferentes para hacerlo aún más confiable.
Aron

1
Debería funcionar en su mayor parte, pero esté cansado de los paquetes que incluyen complementos de jQuery con nombres idénticos.
Adam F

2
@aron Traté de usar esta var bootstrap_enabled = (typeof $ (). modal == 'function'); ¿Cómo usarlo sin jquery? Mi jquery no está cargado en el momento de verificar el bootstrap, por lo que me está dando un error $ undefined.
iit2011081

25

Prefiero buscar un complemento de arranque específico ya que la información sobre herramientas o modal son muy comunes,

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

o

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

funciona en ambas versiones de bootstrap


Creo que esta es la mejor respuesta y está en línea con el pensamiento actual de JavaScript de preocuparse por el soporte de funciones en lugar de buscar marcos completos.
Phil

5

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

donde [?] sería cualquier objeto o espacio de nombres que esté definido dentro del archivo JS.

El concepto de "incluir" no existe en javascript.


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

5

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

compatible con el modo seguro de jQuery,

css check puede necesitar ajustes si usa css personalizado


4

AFAIK, la respuesta corta es

No es posible detectar si twitter bootstrap está cargado

Detalles

El bootstrap de Twitter es esencialmente CSS y un conjunto de complementos js para jquery. Los nombres de los complementos son genéricos como $ .fn.button y el conjunto de complementos para usar también son personalizables. La presencia de un complemento solo por su nombre no ayudaría a determinar si el bootstrap está presente.


2

Puede recuperar <script>elementos y verificar su atributo src, pero como señaló, lo que está buscando es el código en sí y no un nombre de archivo, ya que el código puede estar en cualquier archivo.

La mejor manera de detectar si un servicio / clase / etc. de JavaScript. se carga en una página, es buscar algo en el DOM que sepa que está cargado por el JS dado.

Por ejemplo, para detectar si jQuery está cargado, puede hacerlo null !== window.jQueryo para averiguar la versión del jQuery cargado,jQuery.prototype.jquery


0

Encuentro que esta es la forma más fácil de hacerlo. En cuanto a CSS, no estoy seguro de que haya una forma sencilla de hacerlo.

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


-3

Si escribe esto en la consola, generará la versión de jQuery: console.log(jQuery().jquery);

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.