如何检查 Bootstrap 是否已装载?

如何检查页面上是否加载了 bootstrap.js文件(bootstrap.js文件本身可能被编译/缩小为另一个更大的 JS 文件) ?

91443 次浏览

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

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.

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.

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.

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

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 you type this in the console, it will output the jQuery version: console.log(jQuery().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.