详细

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 is already loaded。

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检查

Answer 5

AFAIK，简短回答是

无法检测是否已加载twitter引导程序

详细

Twitter引导本质上是css和jquery的js插件集。插件名称是通用的，如$ .fn.button，要使用的插件集也可以自定义。只是名字插件的存在无助于确定引导程序存在。

Answer 6

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

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

E.g。要检测是否加载了jQuery，您可以执行null !== window.jQuery或找出加载的jQuery的版本，jQuery.prototype.jquery

Answer 7

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

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

Answer 8

添加引导程序链接，并注意h1标签中的更改。

Answer 9

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

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

9 个答案:

详细