我该如何检查页面上是否已加载了
bootstrap.js
文件(bootstrap.js
文件本身可能已经被编译/压缩到另一个更大的JS文件中)?bootstrap.js
文件(bootstrap.js
文件本身可能已经被编译/压缩到另一个更大的JS文件中)?你只需要简单地检查是否存在Bootstrap特定的方法。我将在这个例子中使用modal(适用于Bootstrap 2-4):
// Will be true if bootstrap is loaded, false otherwise
var bootstrap_enabled = (typeof $().modal == 'function');
// Will be true if Bootstrap 3-4 is loaded, false if Bootstrap 2 or no Bootstrap
var bootstrap_enabled = (typeof $().emulateTransitionEnd == 'function');
我更愿意查找特定的 Bootstrap 插件,因为模态框或工具提示非常常见,所以
if(typeof($.fn.popover) != 'undefined'){
// your stuff here
}
或者 if (typeof $.fn.popover == 'function') {
// your stuff here
}
适用于Bootstrap的两个版本
if (typeof([?])=='undefined') { /*bootstrap is not loaded */}
[?]代表JS文件中定义的任何对象或命名空间。
Javascript中不存在“包含”的概念。
需要说明的是,这段代码意思是如果[?]未定义,则说明Bootstrap未加载。
typeof($.fn.modal) === 'undefined'
。 - Offirmo<script type="text/javascript">
// <![CDATA[
(function($){
function verifyStyle(selector) {//https://dev59.com/QHNA5IYBdhLWcg3wYMx-#983817
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检查。
据我所知,简短的回答是
无法检测到 Twitter Bootstrap 是否已加载
Twitter Bootstrap 本质上是一组基于 CSS 和 jQuery 的插件。插件名称是通用的,如 $.fn.button,并且可用的插件集也是可定制的。仅凭插件名称就不能确定 Bootstrap 是否存在。
<script>
元素并检查它们的src属性,但正如您指出的那样,您要寻找的是代码本身,而不是文件名,因为代码可能在任何文件中。null !== window.jQuery
,或者查找已加载jQuery的版本,jQuery.prototype.jquery
。我认为这是最简单的方法。至于CSS,我不确定是否有简单的方法。
<script>typeof Alert !== 'undefined' || document.write('<script src="/js/bootstrap/bootstrap.min.js">\x3C/script>')</script>
添加Bootstrap链接并注意h1标签的变化。
console.log(jQuery().jquery);
.modal
之外的东西...在那个例子中,会出现太多的误报。 - dhaupin