Sayfada yüklü bir bootstrap.js olup olmadığını nasıl kontrol edebilirim (bootstrap.js dosyası başka bir büyük JS dosyasında derlenebilir)?

Tek yapmanız gereken Bootstrap'e özgü bir yöntemin mevcut olup olmadığını kontrol etmektir. Bu örnekte modal kullanacağım (Bootstrap 2-4 için çalışıyor):

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

Açıkçası% 100 güvenilir değildir, çünkü modsal bir işlev farklı bir eklenti tarafından sağlanabilir, ancak yine de işi yapacak ...

Ayrıca Bootstrap 3-4'ü daha spesifik olarak kontrol edebilirsiniz (3.1+ sürümünden itibaren çalışır):

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

Tüm bu kontrollerin jQuery'nin zaten yüklenmiş olmasını gerektirdiğini unutmayın .

Modal veya araç ipucu çok yaygın olduğu için belirli bir önyükleme eklentisini kontrol etmeyi tercih ederim.

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

veya

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

her iki önyükleme sürümünde çalışır

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

burada [?] JS dosyasının içinde tanımlanan herhangi bir nesne veya ad alanı olabilir.

Javascript'te "dahil etme" kavramı yoktur.

Bkz. 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 güvenli mod ile uyumlu,

Özel css kullanıyorsanız css kontrolünde ince ayar yapılması gerekebilir

AFAIK, Kısa cevap

Twitter önyüklemesinin yüklenip yüklenmediğini tespit etmek mümkün değil

Detaylar

Twitter bootstrap aslında css ve jquery için js eklentileri kümesidir. Eklenti adları $ .fn.button gibi geneldir ve kullanılacak eklenti seti de özelleştirilebilir. Eklentinin sadece adıyla bulunması, önyüklemenin mevcut olduğunu tespit etmeye yardımcı olmaz.

<script>Öğeleri alabilir ve src özniteliklerini kontrol edebilirsiniz, ancak belirttiğiniz gibi, aradığınız şey kodun kendisidir ve kod herhangi bir dosyada olabileceği için bir dosya adı değildir.

Bir JavaScript hizmeti / sınıfı / vb. Olup olmadığını tespit etmenin en iyi yolu. bir sayfaya yüklenir, DOM'da verilen JS tarafından yüklendiğini bildiğiniz bir şey aramaktır.

Örneğin, jQuery'nin yüklü olup olmadığını tespit etmek null !== window.jQueryiçin, yüklenen jQuery'nin sürümünü yapabilir veya öğrenebilirsiniz,jQuery.prototype.jquery

Bunu yapmanın en kolay yolunu buluyorum. CSS'ye gelince, bunu yapmanın basit bir yolu olduğundan emin değilim.

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

Bootstrap bağlantısını ekleyin ve h1 etiketindeki değişikliğe dikkat edin.

Bunu konsola yazarsanız, jQuery sürümünü çıkarır: console.log(jQuery().jquery);