web-dev-qa-db-ja.com

JavaScriptから使用されているBootstrapバージョンを検出するにはどうすればよいですか？

[〜＃〜] css [〜＃〜] ＆ JavaScript from Bootstrap 3.何もモジュール化されていないJavaScriptの場合、jQueryのプロトタイプに挿入されます...

JavaScriptを使用してサードパーティのプラグイン/ライブラリの観点から、ユーザーのWebページに含まれるBootstrapのバージョンを検出するにはどうすればよいでしょうか？

javascriptcsstwitter-bootstraptwitter-bootstrap-3versioning
23
Alerty

Bootstrapの各jQueryプラグインのバージョンには、プラグインのコンストラクターのVERSIONプロパティを介してアクセスできます。

$.fn.tooltip.Constructor.VERSION
33
Kuzenko Lubko

コメントで示唆されているように、唯一のfunctionは削除済み in Bootstrap 3はtypeheadでした-そこにはありません'Bootstrapサイトがロードしたバージョンを検出する信頼できる方法ではないようです。

var bsVersion = ( typeof $.fn.typeahead !== 'undefined' ? '2.3.2' : '3.0.0' );
5
MackieeE

[〜＃〜] 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.現時点では。

3
Ilia Rostovtsev

私のシナリオでは、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;
        }
    }
0
Bruno Laurinec

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>
0
Ludovic Jutant