javascript – How to check if Twitter bootstrap is loaded?-ThrowExceptions

Exception or error:

How can I check whether there is a bootstrap.js loaded on page (a file bootstrap.js may be compiled into another big JS file)?

How to solve:

All you need to do is simply check if a Bootstrap-specific method is available. I’ll use modal in this example (works for Bootstrap 2-4):

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

It is not 100% reliable obviously since a modal function can be provided by a different plugin, but nonetheless it will do the job…

You can also check for Bootstrap 3-4 more specifically (works as of 3.1+):

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

Note that all of these checks require that jQuery is already loaded.

###

I would rather check for specific bootstrap plugin since modal or tooltip are very common, so

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

or

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

works in both bootstrap versions

###

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

where [?] would be any object or namespace which is defined inside the JS file itself.

The concept of “including” doesn’t exist in javascript.

###

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

compatible with jQuery safe mode,

css check might need tweaks if you use custom css

###

AFAIK, Short answer is

It is not possible to detect whether twitter bootstrap is loaded

Details

Twitter bootstrap is essentially css and set of js plugins to jquery. The plugin names are generic like $.fn.button and set of plugins to use are also customizable. Presence of plugin just by name would not help ascertaining that bootstrap is present.

###

You can retrieve <script> elements and check their src attribute but as you pointed out, what you are looking for is the code itself and not a file name as the code may be in any file.

The best way to detect if a JavaScript service/class/etc. is loaded in a page, is to look for something in the DOM that you know is loaded by the given JS.

E.g. to detect if jQuery is loaded, you can do null !== window.jQuery or to find out the version of the loaded jQuery, jQuery.prototype.jquery

###

I find this the easiest way of doing it. As far as css i am not sure there is a simple way of doing that.

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

###

Add the bootstrap link and notice the change in h1 tag.

###

If you type this in the console, it will output the jQuery version:
console.log(jQuery().jquery);

Leave a Reply

Your email address will not be published. Required fields are marked *