ฉันจะตรวจสอบได้อย่างไรว่ามี bootstrap.js โหลดอยู่บนหน้า (ไฟล์ bootstrap.js อาจถูกคอมไพล์เป็นไฟล์ JS ขนาดใหญ่อื่น)

สิ่งที่คุณต้องทำคือตรวจสอบว่ามีวิธีการเฉพาะสำหรับ 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 จะเต็มไปแล้ว

ฉันอยากจะตรวจสอบปลั๊กอิน bootstrap เฉพาะเนื่องจากโมดอลหรือคำแนะนำเครื่องมือเป็นเรื่องปกติมากดังนั้น

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

หรือ

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

ทำงานได้ทั้งในเวอร์ชั่น bootstrap

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

โดยที่ [?] จะเป็นออบเจ็กต์หรือเนมสเปซใด ๆ ที่กำหนดไว้ภายในไฟล์ JS เอง

แนวคิดของ "รวมถึง" ไม่มีอยู่ในจาวาสคริปต์

ดู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 ที่กำหนดเอง

AFAIK คำตอบสั้น ๆ คือ

ไม่สามารถตรวจจับได้ว่าโหลด twitter bootstrap หรือไม่

รายละเอียด

Twitter bootstrap เป็น css และชุดปลั๊กอิน js เป็น jquery ชื่อปลั๊กอินเป็นชื่อทั่วไปเช่น $ .fn.button และชุดปลั๊กอินที่จะใช้ก็สามารถปรับแต่งได้เช่นกัน การมีปลั๊กอินตามชื่อจะไม่ช่วยยืนยันว่ามี bootstrap อยู่

คุณสามารถดึงข้อมูล<script>องค์ประกอบและตรวจสอบแอตทริบิวต์ src ได้ แต่อย่างที่คุณระบุสิ่งที่คุณกำลังมองหาคือรหัสไม่ใช่ชื่อไฟล์เนื่องจากรหัสอาจอยู่ในไฟล์ใดก็ได้

วิธีที่ดีที่สุดในการตรวจสอบว่า JavaScript service / class / etc โหลดในหน้าคือการค้นหาบางสิ่งใน DOM ที่คุณรู้ว่าโหลดโดย JS ที่กำหนด

เช่นเพื่อตรวจสอบว่ามีการโหลด jQuery null !== window.jQueryหรือไม่คุณสามารถทำหรือค้นหาเวอร์ชันของ jQuery ที่โหลดได้jQuery.prototype.jquery

ฉันพบว่านี่เป็นวิธีที่ง่ายที่สุดในการทำ เท่าที่ css ฉันไม่แน่ใจว่ามีวิธีง่ายๆในการทำเช่นนั้น

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

เพิ่มลิงค์ bootstrap และสังเกตการเปลี่ยนแปลงในแท็ก h1

หากคุณพิมพ์สิ่งนี้ในคอนโซลระบบจะส่งออกเวอร์ชัน jQuery: console.log(jQuery().jquery);