How to check if Twitter bootstrap is loaded?
JavascriptTwitter BootstrapJavascript Problem Overview
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)?
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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
Solution 3 - Javascript
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.
Solution 4 - 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
Solution 5 - Javascript
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.
Solution 6 - Javascript
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
Solution 7 - Javascript
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>
Solution 8 - Javascript
Add the bootstrap link and notice the change in h1 tag.
Solution 9 - Javascript
If you type this in the console, it will output the jQuery version:
console.log(jQuery().jquery);