Javascript 如何检查 Twitter 引导程序是否已加载？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13933000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to check if Twitter bootstrap is loaded?
提问by Igor T.
How can I check whether there is a bootstrap.js loaded on page (a file bootstrap.js may be compiled into another big JS file)?
如何检查页面是否加载了bootstrap.js（一个文件bootstrap.js可能会被编译成另一个大的JS文件）？
回答by Aron
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):
您需要做的只是检查是否有特定于 Bootstrap 的方法可用。我将在本例中使用模态（适用于 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...
显然它不是 100% 可靠的，因为模态函数可以由不同的插件提供，但它仍然可以完成这项工作......
You can also check for Bootstrap 3-4 more specifically (works as of 3.1+):
您还可以更具体地检查 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');
Note that all of these checks require that jQuery is already loaded.
请注意，所有这些检查都要求jQuery 已经加载。
回答by Benn
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
适用于两个引导程序版本
回答by max4ever
See https://github.com/netdna/bootstrap-cdn/issues/111#issuecomment-14467221
见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,
兼容 jQuery 安全模式，
css check might need tweaks if you use custom css
如果您使用自定义 css，css 检查可能需要调整
回答by Alex
if (typeof([?])=='undefined') { /*bootstrap is not loaded */}
if (typeof([?])=='undefined') { /*bootstrap is not loaded */}
where [?] would be any object or namespace which is defined inside the JS file itself.
其中 [?] 将是在 JS 文件本身内部定义的任何对象或命名空间。
The concept of "including" doesn't exist in javascript.
javascript 中不存在“包含”的概念。
回答by closure
AFAIK, Short answer is
AFAIK，简短的回答是
It is not possible to detect whether twitter bootstrap is loaded
无法检测是否加载了 twitter bootstrap
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.
Twitter 引导程序本质上是 css 和 jquery 的 js 插件集。插件名称是通用的，如 $.fn.button，并且要使用的插件集也是可定制的。仅按名称存在插件无助于确定引导程序是否存在。
回答by marekful
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.
您可以检索<script>元素并检查它们的 src 属性，但正如您所指出的，您要查找的是代码本身，而不是文件名，因为代码可能在任何文件中。
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.
检测 JavaScript 服务/类/等是否存在的最佳方法。在页面中加载，是在 DOM 中查找您知道由给定 JS 加载的内容。
E.g. to detect if jQuery is loaded, you can do null !== window.jQueryor to find out the version of the loaded jQuery, jQuery.prototype.jquery
例如，要检测 jQuery 是否已加载，您可以执行null !== window.jQuery或找出已加载 jQuery 的版本，jQuery.prototype.jquery
回答by Amplifier
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.
我发现这是最简单的方法。就 css 而言，我不确定是否有一种简单的方法可以做到这一点。
<script>typeof Alert !== 'undefined' || document.write('<script src="/js/bootstrap/bootstrap.min.js">\x3C/script>')</script>
回答by Md Pervez Nawaz
Add the bootstrap link and notice the change in h1 tag.
添加引导程序链接并注意 h1 标签中的更改。
回答by Colette
If you type this in the console, it will output the jQuery version:
console.log(jQuery().jquery);
如果您在控制台中键入此内容，它将输出 jQuery 版本：
console.log(jQuery().jquery);
