Question

我一直在关注CSS＆amp;来自Bootstrap的JavaScript 3.在一个共同的别名下没有任何模块化。对于JavaScript，它被注入到jQuery的原型中......

如何使用JavaScript从第三方插件/库的角度检测用户网页中包含哪个版本的Bootstrap？

Answer 1

每个Bootstrap的jQuery插件的版本都可以通过插件构造函数的VERSION属性访问

$.fn.tooltip.Constructor.VERSION

Answer 2

正如评论中所建议的那样，Bootstrap 3中唯一似乎删除的function是typehead，即便如此 - 似乎没有可靠的方法检测网站加载的Bootstrap版本。

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

Answer 3

如果您想根据 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
 */

在使用same origin policy方法时，如果数据源来自不同的域，子域或协议，则请记住jQuery.get()请求无法成功执行的情况。

$(function () {
    $.get("dist/css/bootstrap.min.css", function (data) {
        var version = data.match(/v[.\d]+[.\d]/);
        alert(version);
    });
});

Example Online

上面的在线示例基于从 jsfiddle.net 获取本地文件，但不是来自 getbootstrap.com ，因为已经提到的安全原因，以及提取评论，在您点击后应相应显示运行按钮。

您也可以通过转到getbootstrap.com，打开控制台并粘贴代码来测试它。运行后，将显示当前版本的 Bootstrap ，即 v3.0.3 时刻。

Answer 4

我分享了我的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>

Answer 5

在我的场景中，我有一个具有引导渲染模式的API，需要确定主要的引导程序版本。我只使用Bootstrap CSS而不是javascript来面对许多实现者的出现。因此，我按照功能进行了一起攻击，尽管根本不完美和干净，但我可以帮助我检测引用的引导程序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使用的Bootstrap版本？

5 个答案: