wake-up-neo.net

Wie kann ich feststellen, welche Bootstrap-Version von JavaScript verwendet wird?

Ich habe mir die CSS & JavaScript von Bootstrap 3 angesehen. Nichts ist unter einem gemeinsamen Alias ​​modularisiert. Für das JavaScript wird es in den Prototyp von jQuery eingefügt ...

Wie kann man feststellen, welche Version von Bootstrap auf der Webseite eines Benutzers aus Sicht eines Drittanbieters mit Plugins/Bibliotheken mit JavaScript enthalten ist?

19
Alerty

Die Version jedes jQuery-Plugins von Bootstrap kann über die Eigenschaft VERSION des Konstruktors des Plugins aufgerufen werden

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

Wie in Kommentaren vorgeschlagen, war die einzige function, die anscheinend remove in Bootstrap 3 zu sein scheint, typehead, selbst wenn - es scheint keinen zuverlässigen Weg zu geben, welche Bootstrap-Version die Site geladen hat.

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

Wenn Sie die Bootstrap-Version basierend auf den Kommentaren in der Datei CSS abrufen möchten, können Sie den folgenden Code verwenden. Es wurde getestet, um sicherzustellen, dass es funktioniert. 

Nehmen Sie an, dass Bootstrap's CSS file einen Kommentar enthält, der eine Version anzeigt (die eigentlich immer auftritt):

/*!
 * Bootstrap v3.0.3 (http://getbootstrap.com)
 * Copyright 2013 Twitter, Inc.
 * Licensed under http://www.Apache.org/licenses/LICENSE-2.0
 */

Denken Sie an die gleiche Origin-Richtlinie , wenn Sie die jQuery.get() -Methode verwenden, bei der die Anforderung nicht erfolgreich ausgeführt wird, wenn die Datenquelle aus einer anderen Domäne, Subdomain oder einem anderen Protokoll stammt.

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

Beispiel Online

Das obige Online-Beispiel basiert auf dem Abrufen der lokalen Datei von jsfiddle.net, jedoch nicht von getbootstrap.com, und zwar aufgrund der bereits genannten Sicherheitsgründe, und Extrahieren eines Kommentars, der sollte entsprechend angezeigt werden, nachdem Sie auf .__ geklickt haben. Ausführen-Taste.

Sie können es auch testen, indem Sie nach getbootstrap.com gehen, eine Konsole öffnen und den Code einfügen. Nach dem Ausführen wird die aktuelle Version von Bootstrap angezeigt. Dies ist v3.0.3.

3
Ilia Rostovtsev

In meinem Szenario habe ich eine API, die über den Bootstrap-Render-Modus verfügt und die Haupt-Bootstrap-Version ermitteln muss. Ich stehe vor vielen Implementierungen, die nur das Bootstrap-CSS und nicht das Javascript verwenden. Ich habe daher folgende Funktion zusammen gehackt, die mir hilft, festzustellen, auf welche Version von Bootstrap-CSS verwiesen wird (obwohl überhaupt nicht perfekt und sauber).

    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

Ich teile mein Javascript-Modul:

/**
 * 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