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

Question

如何检查在页面上是否加载了bootstrap.js（一个文件bootstrap.js可能被编译到另一个大的JS文件中）？

Answer 1

您只需检查Bootstrap特定的方法是否可用即可。我将在这个例子中使用模式（适用于引导2或3）：

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

这显然不是100％可靠的，因为一个模式功能可以通过不同的插件来提供，但仍然会做的工作...

您还可以检查Bootstrap 3（作品为3。1）：

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

Answer 2

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

检测JavaScript服务/类/等的最佳方法。被加载到一个页面中，就是在DOM中查找你知道由给定JS加载的东西。

E.g.检测是否jQuery是加载，你可以做null !== window.jQuery或找出加载的jQuery的版本，jQuery.prototype.jquery

Answer 3

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

其中[？]会被JS文件自身内部定义的任何物体或命名空间。

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

Answer 4

据我所知，简短的回答是

这是不可能检测到Twitter的引导是否加载

详细

Twitter的引导基本上是css和设置JS插件的jQuery的。插件名称是通用的，如$ .fn.button，并使用一组插件也可定制。仅通过名称存在插件无助于确定引导存在。

Answer 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

Answer 6

我宁愿检查特定的引导

CSS检查可能需要调整插件，因为模态或工具提示非常常见，所以

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

或

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

工作在两个引导版本

Answer 7

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

Answer 8

我这个发现做的最简单的方法它。至于CSS我不知道有一个简单的方法来做到这一点。

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