如何检查Twitter bootstrap是否已加载？

Question

我该如何检查页面上是否已加载了bootstrap.js文件（bootstrap.js文件本身可能已经被编译/压缩到另一个更大的JS文件中）？

- Igor

Answer 1

你只需要简单地检查是否存在Bootstrap特定的方法。我将在这个例子中使用modal（适用于Bootstrap 2-4）：

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

不过显然它并不是100％可靠的，因为模态函数可以由不同的插件提供，但无论如何它都能完成工作...

您还可以更具体地检查Bootstrap 3-4（适用于3.1+）：

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

请注意，所有这些检查都需要已经加载jQuery。

- Aron

---

非常感谢！使用本地备用方案从cdnjs加载bootstrap非常方便。 - ptim

你应该使用除了.modal之外的东西...在那个例子中，会出现太多的误报。 - dhaupin

应该大部分情况下可以工作，但要注意包含具有相同名称的 jQuery 插件的软件包。 - Adam Fowler

@Aron 我尝试使用这个代码 var bootstrap_enabled = (typeof $().modal == 'function'); 但是如何在不使用jQuery的情况下使用它呢？由于在检查Bootstrap时我的jQuery没有加载，因此它会给出$未定义错误。 - iit2011081

如果jQuery尚未加载，则Bootstrap也必然尚未加载（至少不正确），因为jQuery是Bootstrap JS的依赖项。如果您还想检查jQuery，请参见https://dev59.com/tWs05IYBdhLWcg3wQvyq - Aron

Answer 2

我更愿意查找特定的 Bootstrap 插件，因为模态框或工具提示非常常见，所以

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

或者

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

适用于Bootstrap的两个版本

- Benn

---

我认为这是最好的答案，并符合当前 JavaScript 思想，即关注功能支持而不是寻找整个框架。 - Phil

Answer 3

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

[?]代表JS文件中定义的任何对象或命名空间。

Javascript中不存在“包含”的概念。

需要说明的是，这段代码意思是如果[?]未定义，则说明Bootstrap未加载。

- Alex

---

举例来说，如果 typeof($.fn.modal) === 'undefined'。 - Offirmo

Answer 4

请参考https://github.com/netdna/bootstrap-cdn/issues/111#issuecomment-14467221。

<script type="text/javascript">
    // <![CDATA[
    (function($){

        function verifyStyle(selector) {//https://dev59.com/QHNA5IYBdhLWcg3wYMx-#983817
            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>

兼容jQuery安全模式，

如果您使用自定义CSS，可能需要微调CSS检查。

- max4ever

Answer 5

据我所知，简短的回答是

无法检测到 Twitter Bootstrap 是否已加载

详情

Twitter Bootstrap 本质上是一组基于 CSS 和 jQuery 的插件。插件名称是通用的，如 $.fn.button，并且可用的插件集也是可定制的。仅凭插件名称就不能确定 Bootstrap 是否存在。

- closure

Answer 6

您可以检索<script>元素并检查它们的src属性，但正如您指出的那样，您要寻找的是代码本身，而不是文件名，因为代码可能在任何文件中。

检测页面中是否加载了JavaScript服务/类等的最佳方法是查找DOM中您知道由给定JS加载的内容。

例如，要检测是否已加载jQuery，可以执行null !== window.jQuery，或者查找已加载jQuery的版本，jQuery.prototype.jquery。

- marekful

Answer 7

我认为这是最简单的方法。至于CSS，我不确定是否有简单的方法。

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

- Amplifier

Answer 8

添加Bootstrap链接并注意h1标签的变化。

- Md Pervez Nawaz

Answer 9

如果您在控制台中输入以下内容，它将输出jQuery版本： console.log(jQuery().jquery);

- Colette