【问题标题】：How to check if Twitter bootstrap is loaded?如何检查 Twitter 引导程序是否已加载？
【发布时间】：2012-12-05 15:51:48
【问题描述】：

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

【问题讨论】：

标签： javascript twitter-bootstrap frontend

【解决方案1】：

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

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

例如要检测 jQuery 是否被加载，你可以做 null !== window.jQuery 或者找出加载的 jQuery 的版本，jQuery.prototype.jquery

【讨论】：

【解决方案2】：

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

其中 [?] 可以是在 JS 文件本身中定义的任何对象或命名空间。

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

【讨论】：

例如if(typeof($.fn.modal) === 'undefined')

【解决方案3】：

AFAIK，简短的回答是

无法检测twitter bootstrap是否加载

详情

Twitter bootstrap 本质上是 css 和 jquery 的一组 js 插件。插件名称是通用的，如 $.fn.button 并且要使用的插件集也是可定制的。仅按名称存在插件无助于确定是否存在引导程序。

【讨论】：

【解决方案4】：

您需要做的只是检查是否有特定于 Bootstrap 的方法可用。我将在此示例中使用模态（适用于 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 is already loaded。

【讨论】：

谢谢！非常方便使用本地后备从 cdnjs 加载引导程序
你应该使用除.modal之外的其他东西......那个例子到处都是误报。
是的，可能会出现误报，这是真的。不幸的是，大多数可能的检查在 Bootstrap 中都相当笼统地命名，因此很难避免这个问题，但也许更晦涩的一个是 scrollspy.noConflict。因此，检查 scrollspy 和 noConflict 是否存在可能不太容易出现误报。您还可以将几种不同的检查结合起来，使其更加可靠。
应该可以在大部分情况下工作，但要对包含同名 jQuery 插件的软件包感到厌烦。
@aron 我尝试使用这个 var bootstrap_enabled = (typeof $().modal == 'function');如何在没有 jquery 的情况下使用它？我的 jquery 在检查引导时没有加载，所以它给了我 $ undefined 错误。

【解决方案5】：

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

兼容jQuery安全模式，

如果您使用自定义 css，css 检查可能需要调整

【讨论】：

【解决方案6】：

我宁愿检查特定的引导插件，因为模态或工具提示很常见，所以

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

或

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

适用于两个引导程序版本

【讨论】：

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

【解决方案7】：

如果你在控制台输入这个，它将输出 jQuery 版本： console.log(jQuery().jquery);

【讨论】：

【解决方案8】：

我发现这是最简单的方法。就 css 而言，我不确定是否有一种简单的方法可以做到这一点。

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

【讨论】：

【解决方案9】：

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

【讨论】：