[〜#〜] css [〜#〜] & JavaScript from Bootstrap 3.何もモジュール化されていないJavaScriptの場合、jQueryのプロトタイプに挿入されます...
JavaScriptを使用してサードパーティのプラグイン/ライブラリの観点から、ユーザーのWebページに含まれるBootstrapのバージョンを検出するにはどうすればよいでしょうか?
Bootstrapの各jQueryプラグインのバージョンには、プラグインのコンストラクターのVERSIONプロパティを介してアクセスできます。
$.fn.tooltip.Constructor.VERSION
コメントで示唆されているように、唯一のfunction
は削除済み in Bootstrap 3はtypehead
でした-そこにはありません'Bootstrapサイトがロードしたバージョンを検出する信頼できる方法ではないようです。
var bsVersion = ( typeof $.fn.typeahead !== 'undefined' ? '2.3.2' : '3.0.0' );
[〜#〜] css [〜#〜]ファイル内のコメントに基づいてBootstrapのバージョンを取得する場合は、次のコードを使用できます。動作することを確認するためにテストされています。
_Bootstrap's CSS file
_ にバージョンを表示するコメントが含まれていると仮定します(常に実際に行います)。
_/*!
* Bootstrap v3.0.3 (http://getbootstrap.com)
* Copyright 2013 Twitter, Inc.
* Licensed under http://www.Apache.org/licenses/LICENSE-2.0
*/
_
同じOriginポリシー を覚えておいてください。 jQuery.get()
メソッドを使用する場合、データがあれば、リクエストは正常に実行されません。ソースは、異なるドメイン、サブドメイン、またはプロトコルからのものです。
_$(function () {
$.get("dist/css/bootstrap.min.css", function (data) {
var version = data.match(/v[.\d]+[.\d]/);
alert(version);
});
});
_
上記のオンライン例は、jsfiddle.netからローカルファイルを取得することに基づいていますが、getbootstrap.comからではなく、既に述べたセキュリティ上の理由により、コメントを抽出しますRunボタンを押すと、それに応じて表示されるはずです。
_getbootstrap.com
_ に移動し、コンソールを開いてコードを貼り付けるだけでもテストできます。実行後、Bootstrapの現在のバージョンが表示されます、つまりv3.0.現時点では。
私のシナリオでは、bootstrapレンダリングモードがあり、メジャーbootstrap=バージョンを決定する必要があります。 Bootstrap CSSではなくJavaScriptです。したがって、完全ではなく、まったくクリーンではありませんが、bootstrap CSSのバージョンを検出するのに役立ちます。参照されている(ある場合)
function getBoostrapMajorVersion() {
try {
return Number(window['jQuery'].fn.tooltip.Constructor.VERSION.substring(0, 1));
} catch (e) { }
var testElement = document.createElement('div');
testElement.setAttribute('style', 'display:block;width:100px;height:100px;position:absolute;opacity:0.001;');
testElement.innerHTML = '<div style="display:block;" class="w-50 h-25"></div>';
document.body.appendChild(testElement);
if (testElement.childNodes[0].clientHeight == 25 && testElement.childNodes[0].clientWidth == 50) {
document.body.removeChild(testElement);
return 4;
}
testElement.innerHTML = ''
testElement.setAttribute('class', 'hidden-xs hidden-sm hidden-md hidden-lg');
if (testElement.clientHeight == 0) {
document.body.removeChild(testElement);
return 3;
}
}
Javascriptモジュールを共有します:
/**
* Created by LJT.
*/
myBootstrapUtils = function () {
/**
* Search bootstrap.min.js or bootstrap.js in DOM
* @return {*}
*/
function getBootStrapJsUrl() {
var bootstrapUrl;
$('script').each(function () {
var externalJsSrc = $(this).attr('src');
if (typeof externalJsSrc !== 'undefined') {
if (externalJsSrc.toLowerCase().lastIndexOf('bootstrap.min.js') !== -1 || externalJsSrc.toLowerCase().lastIndexOf('bootstrap.js') !== -1) {
bootstrapUrl = externalJsSrc;
return false;
}
}
});
return bootstrapUrl;
}
function hasBootStrapJs() {
return getBootStrapJsUrl() !== undefined;
}
/**
* This function grab the bootstrap's version in Js File
* @param data Data file representation
* @return {*}
*/
function analyseBootstrapJsFile(data) {
var bootstrapVersion;
var matches = data.match(/v[.\d]+[.\d]/);
if (matches === null) {
bootstrapVersion = 'unknown';
} else {
//Security Array.isArray(matches) === true ?
bootstrapVersion = matches[0];
}
//console.log(bootstrapVersion);
return bootstrapVersion;
}
function getBootStrapJsVersionSyncMode() {
var version,
bootstrapUrl = getBootStrapJsUrl();
if (bootstrapUrl !== undefined) {
jQuery.ajax({
url: bootstrapUrl,
success: function (data) {
version = analyseBootstrapJsFile(data);
},
async: false
});
}
return version;
}
function getBootStrapJsVersionAsyncMode(defered) {
var bootstrapUrl = getBootStrapJsUrl();
if (bootstrapUrl !== undefined) {
$.get(bootstrapUrl)
.then(function (data) {
version = analyseBootstrapJsFile(data);
defered.resolve(version);
})
.fail(function () {
defered.fail();
});
} else {
defered.fail();
}
}
/**
* Example for async mode usage
*/
function exampleAsyncMode() {
var dfd = $.Deferred();
dfd.done(function (version) {
console.log('My bootstrap version is : ' + version);
});
dfd.fail(function (version) {
console.log('Error while request bootstrap version ...');
});
getBootStrapJsVersionAsyncMode(dfd);
}
/**
* Easy way to get bootstrap plugin version
* @see http://getbootstrap.com/javascript/#js-version-nums
* @return {*}
*/
function getBoostrapModalVersion() {
return $.fn.modal.Constructor.VERSION;
}
return {
hasBootStrapJs: hasBootStrapJs,
getBootStrapJsVersionSyncMode: getBootStrapJsVersionSyncMode,
getBootStrapJsVersionAsyncMode: getBootStrapJsVersionAsyncMode
}
}();
console.log(myBootstrapUtils.hasBootStrapJs());
console.log(myBootstrapUtils.getBootStrapJsVersionSyncMode());
//myBootstrapUtils.exampleAsyncMode();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>