Làm cách nào để kiểm tra xem có tệp bootstrap.js được tải trên trang hay không (tệp bootstrap.js có thể được biên dịch thành một tệp JS lớn khác)?

Tất cả những gì bạn cần làm chỉ đơn giản là kiểm tra xem có phương pháp dành riêng cho Bootstrap hay không. Tôi sẽ sử dụng phương thức trong ví dụ này (hoạt động cho Bootstrap 2-4):

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

Rõ ràng là nó không đáng tin cậy 100% vì một chức năng phương thức có thể được cung cấp bởi một plugin khác, nhưng dù sao thì nó cũng sẽ thực hiện công việc ...

Bạn cũng có thể kiểm tra Bootstrap 3-4 cụ thể hơn (hoạt động từ 3.1+):

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

Lưu ý rằng tất cả các kiểm tra này đều yêu cầu jQuery đã được tải .

Tôi muốn kiểm tra plugin bootstrap cụ thể vì modal hoặc tooltip rất phổ biến, vì vậy

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

hoặc là

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

hoạt động trong cả hai phiên bản bootstrap

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

trong đó [?] sẽ là bất kỳ đối tượng hoặc không gian tên nào được định nghĩa bên trong chính tệp JS.

Khái niệm "bao gồm" không tồn tại trong javascript.

Xem 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>

tương thích với chế độ an toàn jQuery,

kiểm tra css có thể cần chỉnh sửa nếu bạn sử dụng css tùy chỉnh

AFAIK, câu trả lời ngắn gọn là

Không thể phát hiện liệu twitter bootstrap đã được tải hay chưa

Chi tiết

Twitter bootstrap về cơ bản là css và tập hợp các plugin js cho jquery. Các tên plugin chung chung như $ .fn.button và tập hợp các plugin để sử dụng cũng có thể tùy chỉnh. Sự hiện diện của plugin chỉ bằng tên sẽ không giúp xác định chắc chắn rằng bootstrap đang có mặt.

Bạn có thể truy xuất <script>các phần tử và kiểm tra thuộc tính src của chúng nhưng như bạn đã chỉ ra, thứ bạn đang tìm kiếm là chính mã chứ không phải tên tệp vì mã có thể có trong bất kỳ tệp nào.

Cách tốt nhất để phát hiện xem một dịch vụ JavaScript / lớp / v.v. được tải trong một trang, là tìm kiếm thứ gì đó trong DOM mà bạn biết là được tải bởi JS nhất định.

Ví dụ: để phát hiện xem jQuery đã được tải hay chưa, bạn có thể thực hiện null !== window.jQueryhoặc để tìm ra phiên bản của jQuery đã tải,jQuery.prototype.jquery

Tôi thấy đây là cách dễ nhất để làm điều đó. Theo như css, tôi không chắc có một cách đơn giản để làm điều đó.

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

Thêm liên kết bootstrap và nhận thấy sự thay đổi trong thẻ h1.

Nếu bạn nhập vào bảng điều khiển, nó sẽ xuất ra phiên bản jQuery: console.log(jQuery().jquery);