Как проверить, загружен ли бутстрап Twitter?

86

Как я могу проверить, загружен ли на страницу bootstrap.js (файл bootstrap.js может быть скомпилирован в другой большой JS-файл)?

Игорь Т.
источник

Ответы:

125

Все, что вам нужно сделать, это просто проверить, доступен ли метод, специфичный для Bootstrap. В этом примере я буду использовать модальное окно (работает для Bootstrap 2-4):

// Will be true if bootstrap is loaded, false otherwise
var bootstrap_enabled = (typeof $().modal == 'function');

Очевидно, что это не на 100% надежно, поскольку модальная функция может быть предоставлена ​​другим плагином, но, тем не менее, он выполнит свою работу ...

Вы также можете более конкретно проверить Bootstrap 3-4 (работает с версии 3.1+):

// Will be true if Bootstrap 3-4 is loaded, false if Bootstrap 2 or no Bootstrap
var bootstrap_enabled = (typeof $().emulateTransitionEnd == 'function');

Обратите внимание, что для всех этих проверок требуется, чтобы jQuery уже был загружен .

Арон
источник
благодаря! очень удобно для загрузки начальной загрузки с cdnjs с локальным резервным
копированием
1
Вы должны использовать что-то помимо .modal..... Ложные срабатывания повсюду в этом примере.
dhaupin 03
Да, возможны ложные срабатывания, это правда. К сожалению, большинство возможных проверок имеют довольно общие названия в Bootstrap, поэтому избежать этой проблемы сложно, но, возможно, более непонятной является scrollspy.noConflict. Таким образом, проверка наличия как scrollspy, так и noConflict может быть менее подвержена ложным срабатываниям. Вы также можете комбинировать несколько разных проверок, чтобы сделать его еще более надежным.
Aron
1
Должно работать по большей части, но вам надоедают пакеты, которые включают плагины jQuery с одинаковыми именами.
Adam F
2
@aron Я пробовал использовать эту var bootstrap_enabled = (typeof $ (). modal == 'function'); Как пользоваться без jquery? Мой jquery не загружается во время проверки начальной загрузки, поэтому он дает мне ошибку $ undefined.
iit2011081
25

Я бы предпочел проверить конкретный плагин начальной загрузки, поскольку модальные окна или всплывающие подсказки очень распространены, поэтому

if(typeof($.fn.popover) != 'undefined'){
 // your stuff here
}

или же

 if (typeof $.fn.popover == 'function') { 
   // your stuff here
  }

работает в обеих версиях бутстрапа

Бенн
источник
Я думаю, что это лучший ответ, и он соответствует текущему мышлению JavaScript, касающемуся поддержки функций, а не поиска целых фреймворков.
Фил
5

if (typeof([?])=='undefined') { /*bootstrap is not loaded */}

где [?] будет любой объект или пространство имен, которое определено внутри самого файла JS.

В javascript нет понятия «включение».

Alex
источник
6
Напримерif(typeof($.fn.modal) === 'undefined')
Offirmo
5

См. Https://github.com/netdna/bootstrap-cdn/issues/111#issuecomment-14467221

<script type="text/javascript">
    // <![CDATA[
    (function($){

        function verifyStyle(selector) {//http://stackoverflow.com/a/983817/579646
            var rules;
            var haveRule = false;

            if (typeof document.styleSheets != "undefined") {   //is this supported
                var cssSheets = document.styleSheets;

                outerloop:
                for (var i = 0; i < cssSheets.length; i++) {

                     //using IE or FireFox/Standards Compliant
                    rules =  (typeof cssSheets[i].cssRules != "undefined") ? cssSheets[i].cssRules : cssSheets[i].rules;

                     for (var j = 0; j < rules.length; j++) {
                         if (rules[j].selectorText == selector) {
                                 haveRule = true;
                                break outerloop;
                         }
                    }//innerloop

                }//outer loop
            }//endif

            return haveRule;
        }//eof

        <!-- BOOTSTRAP JS WITH LOCAL FALLBACK-->
        if(typeof($.fn.modal) === 'undefined') {document.write('<script src="<?=$path_js?>/bootstrap.min.js"><\/script>')}

        <!-- BOOTSTRAP CDN FALLBACK CSS-->
        $(document).ready(function() {

            if( verifyStyle('form-inline') )
            {
                $("head").prepend("<link rel='stylesheet' href='<?=$path_css?>bootstrap.min.css' type='text/css' media='screen'>");
            }
            else
            {
                //alert('bootstrap already loaded');
            }
        });
    })(jQuery);
    // ]]>
    </script>

совместим с безопасным режимом jQuery,

проверка css может потребовать доработки, если вы используете собственный css

max4ever
источник
4

AFAIK, короткий ответ

Невозможно определить, загружен ли бутстрап twitter

Детали

Загрузчик Twitter - это, по сути, css и набор js-плагинов для jquery. Имена плагинов являются общими, например $ .fn.button, и набор используемых плагинов также можно настроить. Наличие плагина только по имени не поможет установить наличие начальной загрузки.

закрытие
источник
2

Вы можете извлекать <script>элементы и проверять их атрибут src, но, как вы указали, вы ищете сам код, а не имя файла, поскольку код может быть в любом файле.

Лучший способ определить, есть ли служба / класс / класс JavaScript / и т. Д. загружается на страницу, это искать в DOM что-то, что, как вы знаете, загружается данным JS.

Например, чтобы определить, загружен ли jQuery, вы можете сделать null !== window.jQueryили узнать версию загруженного jQuery,jQuery.prototype.jquery

марекфул
источник
0

Я считаю, что это самый простой способ сделать это. Что касается css, я не уверен, что есть простой способ сделать это.

<script>typeof Alert !== 'undefined' || document.write('<script src="/js/bootstrap/bootstrap.min.js">\x3C/script>')</script>
Усилитель звука
источник
0

Добавьте ссылку начальной загрузки и обратите внимание на изменение тега h1.

Md Pervez Nawaz
источник
-3

Если вы введете это в консоли, будет выведена версия jQuery: console.log(jQuery().jquery);

Колетт
источник