CODEWITHSUNDEEP
javascripttwitter-bootstrap
Igor
Igor

Reputation: 2919

How to check if Twitter bootstrap is loaded?

How can I check whether there is a bootstrap.js file loaded on a page (the bootstrap.js file itself may be compiled/minified into another, bigger JS file)?

Upvotes: 99

Views: 97657

Answers (9)

Md Pervez Nawaz
Md Pervez Nawaz

Reputation: 37

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

Upvotes: 0

Aron
Aron

Reputation: 3571

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.

Upvotes: 138

Amplifier
Amplifier

Reputation: 203

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>

Upvotes: 0

Colette
Colette

Reputation: 27

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

Upvotes: -4

Benn
Benn

Reputation: 5023

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

Upvotes: 29

max4ever
max4ever

Reputation: 12142

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

Upvotes: 5

closure
closure

Reputation: 7452

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.

Upvotes: 4

Alex
Alex

Reputation: 23300

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.

Upvotes: 6

marekful
marekful

Reputation: 15351

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

Upvotes: 2

Related Questions