如何检查是否加载了Twitter引导程序？

Question

如何检查页面上是否加载了bootstrap.js(文件bootstrap.js可能被编译成另一个大的JS文件)？

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.

Answer 2

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

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

要么

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

适用于两个引导版本

Answer 3

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

其中[？]是JS文件本身内部定义的任何对象或命名空间.

javascript中不存在"包含"的概念.

Answer 4

请参阅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检查