Twitterのブートストラップが読み込まれているかどうかを確認するには？

Question

bootstrap.jsがページにロードされているかどうかを確認するにはどうすればいいですか（bootstrap.jsファイルを別の大きなJSファイルにコンパイルすることができます）。

Answer 1

ブートストラップ固有の方法が利用可能かどうかを確認するだけです。モーダル機能は、異なるプラグインによって提供することができるので、これは明らかに100％信頼できるものではありません

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

、それにもかかわらず、それは仕事をする：私は（ブートストラップ2または3のために動作します）この例では、モーダルを使用します...

また、ブートストラップ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サービス/クラス/などがあるかどうかを検出する最適な方法です。指定されたJSによってロードされていることをあなたが知っているDOM内の何かを探すことです。

など。 、jQueryのがロードされている場合は、あなたがnull !== window.jQueryを行うことができますかロードのjQueryのバージョンを見つけるために[？]がJSファイル自体の内部で定義されている任意のオブジェクトまたは名前空間になりjQuery.prototype.jquery

Answer 3

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

を検出するために、 。

「含む」という概念はjavascriptにはありません。

Answer 4

私の知る限りでは、短い答えは、Twitterのブートストラップが

詳細

Twitterのブートストラップは、基本的にCSSとjQueryにJSプラグインのセットですがロードされているかどうかを検出することはできません

です。プラグイン名は$ .fn.buttonのように一般的で、使用するプラグインのセットもカスタマイズ可能です。名前だけでプラグインが存在すると、ブートストラップが存在していることを確認できません。

Answer 5

はjQueryの安全なモードと互換性が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> 

を参照してください、

CSSのチェックでは、カスタムCSS

Answer 6

を使用している場合、私はむしろ、特定のブートストラップをチェックしまうの調整が必要になる場合がありますプラグインはモーダルまたはツールチップが非常に一般的なので、

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>