如何检查页面上是否加载了bootstrap.js(文件bootstrap.js可能会编译为另一个大JS文件)?
Answers:
您需要做的只是简单地检查特定于Bootstrap的方法是否可用。我将在此示例中使用模式(适用于Bootstrap 2-4):
// Will be true if bootstrap is loaded, false otherwise
var bootstrap_enabled = (typeof $().modal == 'function');
它显然不是100%可靠的,因为模态函数可以由其他插件提供,但尽管如此,它仍能完成工作...
您还可以更具体地检查Bootstrap 3-4(从3.1+版本开始工作):
// Will be true if Bootstrap 3-4 is loaded, false if Bootstrap 2 or no Bootstrap
var bootstrap_enabled = (typeof $().emulateTransitionEnd == 'function');
请注意,所有这些检查都要求jQuery已被加载。
.modal
在该示例中,您还应该在所有地方使用......误报以外的内容。
参见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>
与jQuery安全模式兼容,
如果您使用自定义CSS,则可能需要调整CSS检查