Як перевірити, чи завантажений завантажувальний файл Twitter?


85

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

Відповіді:


124

Все, що вам потрібно зробити, це просто перевірити, чи доступний спеціальний метод 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 з локальним резервним резервом
ptim

1
Вам слід використати щось крім .modal..... Помилкові позитиви повсюдно з цим прикладом.
dhaupin

Так, можливі помилкові спрацьовування, це правда. На жаль, більшість можливих перевірок досить загально названі в Bootstrap, тому складно уникнути цієї проблеми, але, можливо, більш незрозумілою є scrollspy.noConflict. Тож перевірка, що існують як scrollspy, так і noConflict, може бути менш схильна до помилкових спрацьовувань. Ви також можете поєднати кілька різних перевірок, щоб зробити його ще більш надійним.
Арон

1
Має працювати здебільшого, але втомитися від пакетів, які включають плагіни jQuery з однаковими іменами.
Адам F

2
@aron Я намагався використати цей var bootstrap_enabled = (typeof $ (). modal == 'function'); Як використовувати його без jquery? Мій jquery не завантажується під час перевірки завантажувального файлу, тому він видає мені невизначену помилку в $.
iit2011081

25

Я б скоріше перевірив наявність конкретного плагіна bootstrap, оскільки модальні або підказки дуже поширені, тому

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

або

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

працює в обох версіях bootstrap


Я вважаю, що це найкраща відповідь і відповідає поточному мисленню JavaScript щодо того, щоб займатися підтримкою функцій, а не шукати цілі фреймворки.
Філ

5

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

де [?] - будь-який об'єкт або простір імен, який визначено всередині самого файлу JS.

Поняття "включення" не існує в javascript.


6
Наприкладif(typeof($.fn.modal) === 'undefined')
Offirmo 20.03.13

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 check може знадобитися налаштування, якщо ви використовуєте користувацький css


4

AFAIK, Коротка відповідь

Неможливо виявити, чи завантажено завантажувальний файл twitter

Деталі

Twitter bootstrap - це, по суті, css та набір плагінів js для jquery. Назви плагінів є загальними, як-от кнопка $ .fn. та набір плагінів, що використовуються, також можна налаштувати. Наявність плагіна лише за назвою не допомогло б встановити наявність бутстрапа.


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>


-3

Якщо ви введете це в консолі, виведеться версія jQuery: console.log(jQuery().jquery);

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.