web-dev-qa-db-fra.com

Comment détecter quelle version de Bootstrap est utilisée à partir de JavaScript?

J'ai regardé le CSS & JavaScript de Bootstrap 3. Rien n'est modularisé sous un alias commun. Pour le JavaScript, il est injecté dans le prototype de jQuery ...

Comment serait-il possible de détecter quelle version de Bootstrap est incluse dans la page Web d'un utilisateur du point de vue des plugins/bibliothèques tiers avec JavaScript?

javascriptcsstwitter-bootstraptwitter-bootstrap-3versioning
19
Alerty

La version de chacun des plugins jQuery de Bootstrap est accessible via la propriété VERSION du constructeur du plugin.

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

Comme suggéré dans les commentaires, la seule function qui semble être supprimée dans Bootstrap 3 était typehead, même alors - il ne semble pas y avoir de moyen fiable de détecter quelle version de Bootstrap le site a été chargé.

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

Dans mon scénario, j'ai une API qui a le mode de rendu bootstrap et qui doit déterminer la version de bootstrap principale. Je suis confronté à de nombreuses occurrences de développeurs utilisant uniquement le CSS Bootstrap et non le javascript. J'ai donc hacké ensemble la fonction suivante qui, bien que pas parfaite et propre, m'aide à détecter quelle version de Bootstrap CSS est référencée

    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

Je partage mon module 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