Як я можу перевірити, чи є на сторінці завантажений bootstrap.js (файл bootstrap.js може бути скомпільований в інший великий JS-файл)?
Відповіді:
Все, що вам потрібно зробити, це просто перевірити, чи доступний спеціальний метод 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 вже завантажився .
.modal
..... Помилкові позитиви повсюдно з цим прикладом.
Я б скоріше перевірив наявність конкретного плагіна bootstrap, оскільки модальні або підказки дуже поширені, тому
if(typeof($.fn.popover) != 'undefined'){
// your stuff here
}
або
if (typeof $.fn.popover == 'function') {
// your stuff here
}
працює в обох версіях bootstrap
if (typeof([?])=='undefined') { /*bootstrap is not loaded */}
де [?] - будь-який об'єкт або простір імен, який визначено всередині самого файлу JS.
Поняття "включення" не існує в javascript.
if(typeof($.fn.modal) === 'undefined')
Див. 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
AFAIK, Коротка відповідь
Неможливо виявити, чи завантажено завантажувальний файл twitter
Twitter bootstrap - це, по суті, css та набір плагінів js для jquery. Назви плагінів є загальними, як-от кнопка $ .fn. та набір плагінів, що використовуються, також можна налаштувати. Наявність плагіна лише за назвою не допомогло б встановити наявність бутстрапа.
Ви можете отримати <script>
елементи та перевірити їх атрибут src, але, як ви вже зазначили, ви шукаєте сам код, а не ім'я файлу, оскільки код може бути в будь-якому файлі.
Найкращий спосіб виявити, чи є служба JavaScript / клас / тощо. завантажується на сторінку, це шукати щось у DOM, яке, як ви знаєте, завантажується заданим JS.
Наприклад, щоб визначити, чи завантажено jQuery, ви можете зробити null !== window.jQuery
або дізнатися версію завантаженого jQuery,jQuery.prototype.jquery
Я вважаю, що це найпростіший спосіб зробити це. Що стосується css, я не впевнений, що це простий спосіб зробити це.
<script>typeof Alert !== 'undefined' || document.write('<script src="/js/bootstrap/bootstrap.min.js">\x3C/script>')</script>
Додайте посилання для завантаження та помітьте зміну тегу h1.