如何检查Twitter引导程序是否已加载?


Answers:


124

您需要做的只是简单地检查特定于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已被加载


谢谢!非常有用,可以从CDnjs加载带有本地备用的
Bootstrap

1
.modal在该示例中,您还应该在所有地方使用......误报以外的内容。
dhaupin 2015年

是的,可能会出现误报,这是事实。不幸的是,大多数可能的检查在Bootstrap中都是相当通用的名称,因此很难避免此问题,但也许更晦涩的是scrollspy.noConflict。因此,检查scrollspy和noConflict是否都存在可能更不容易产生误报。您还可以组合几种不同的检查以使其更加可靠。
阿隆2015年

1
应该在大多数情况下都可以工作,但是对包含名称相同的jQuery插件的软件包感到厌倦。
亚当F

2
@aron我尝试使用此var bootstrap_enabled =(typeof $()。modal =='function'); 如何在没有jquery的情况下使用它?在检查引导程序时未加载我的jquery,因此它给了我$ undefined错误。
iit2011081

25

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

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

要么

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

在两个引导版本中均可使用


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

5

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

其中[?]是JS文件本身内定义的任何对象或名称空间。

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


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

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


4

AFAIK,简单的答案是

无法检测是否已加载twitter bootstrap

细节

Twitter引导程序本质上是css和jquery的js插件集。插件名称是通用的,例如$ .fn.button,使用的插件集也可以自定义。仅按名称显示插件的存在将无法帮助确定是否存在引导程序。


2

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

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

例如,要检测是否已加载jQuery,可以执行操作null !== window.jQuery或找出已加载jQuery的版本,jQuery.prototype.jquery


0

我发现这是最简单的方法。至于css,我不确定是否有简单的方法可以做到这一点。

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


-3

如果在控制台中键入此命令,它将输出jQuery版本: console.log(jQuery().jquery);

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.