Я связываюсь с таблицей стилей jQuery Mobile в CDN и хотел бы вернуться к своей локальной версии таблицы стилей, если CDN не работает. Для скриптов решение хорошо известно:
<!-- Load jQuery and jQuery mobile with fall back to local server -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='jquery-1.6.3.min.js'%3E"));
}
</script>
Я хотел бы сделать что-то подобное для таблицы стилей:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
Я не уверен, может ли быть реализован аналогичный подход, потому что я не уверен, блокирует ли браузер таким же образом при связывании скрипта, как при загрузке скрипта (возможно, можно загрузить таблицу стилей в тег скрипта, а затем ввести его на страницу)?
Итак, мой вопрос: как обеспечить локальную загрузку таблицы стилей в случае сбоя CDN?
Ответы:
Не тестировался в разных браузерах, но я думаю, что это сработает. Это должно быть после загрузки jquery, или вам придется переписать его на простой Javascript.
источник
CSSStyleSheet
расслоения плотных объектов , которые приходят из bootstrapcdn.com всех пустыеrules
иcssRules
поле в моем браузере (Chrome 31). UPD : на самом деле это может быть проблема с несколькими доменами, файл css в ответе также у меня не работает.onerror
event. stackoverflow.com/questions/30546795/….rules
/.cssRules
для внешних таблиц стилей. jsfiddle.net/E6yYN/13Думаю, вопрос в том, чтобы определить, загружена ли таблица стилей или нет. Один из возможных подходов следующий:
1) Добавьте специальное правило в конец вашего файла CSS, например:
2) Добавьте соответствующий div в свой HTML:
3) Когда документ готов, проверьте,
#foo
виден он или нет. Если таблица стилей была загружена, она не будет видна.Демо здесь - загружает тему гладкости jquery-ui; в таблицу стилей не добавляется никакое правило.
источник
Предполагая, что вы используете один и тот же CDN для css и jQuery, почему бы просто не провести один тест и не уловить все?
источник
document.write("<script type='text/javascript' src='path/to/file.js'>")
?<script>
строку JS внутри от строки, найденной снаружи. Обычно это также происходит<\/script>
при записи тегов для резервных вариантов CDN.why not just do one test and catch it all?
- Потому что есть миллион причин, по которым один может потерпеть неудачу, а другой - добиться успеха.в этой статье предлагаются некоторые решения для начальной загрузки css http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/
в качестве альтернативы это работает для fontawesome
источник
Вы могли бы быть в состоянии проверить существование таблицы стилей в
document.styleSheets
.Проверьте что-то особенное для используемого вами файла CSS.
источник
Для этого можно использовать
onerror
:Это
this.onerror=null;
делается для того, чтобы избежать бесконечных циклов в случае, если сам резервный вариант недоступен. Но его также можно использовать для создания нескольких резервных вариантов.Однако в настоящее время это работает только в Firefox и Chrome.
источник
Вот продолжение ответа Кэти Лавалли. Я обернул все синтаксисом самоисполняющейся функции, чтобы предотвратить конфликты переменных. Я также сделал скрипт не привязанным к одной ссылке. IE, теперь любая ссылка на таблицу стилей с атрибутом URL-адреса "data-fallback" будет автоматически анализироваться. Вам не нужно жестко указывать URL-адреса в этом скрипте, как раньше. Обратите внимание, что это следует запускать в конце
<head>
элемента, а не в конце<body>
элемента, иначе это может вызвать FOUC .http://jsfiddle.net/skibulk/jnfgyrLt/
.
источник
document.styleSheets[i].ownerNode.dataset
вы можете получить доступ к<link data-* />
атрибутамВы действительно хотите пройти по этому пути javascript для загрузки CSS в случае сбоя CDN?
Я не продумал все последствия для производительности, но вы потеряете контроль над загрузкой CSS и, в целом, для производительности загрузки страницы CSS - это первое, что вы хотите загрузить после HTML.
Почему бы не справиться с этим на уровне инфраструктуры - сопоставьте свое собственное доменное имя с CDN, задайте ему короткий TTL, отслеживайте файлы в CDN (например, с помощью Watchmouse или чего-то еще), если CDN не работает, измените DNS на резервный сайт.
Другие варианты, которые могут помочь, - это «кешировать навсегда» статического контента, но нет гарантии, что браузер, конечно, сохранит их или использует кеш приложения.
На самом деле, как кто-то сказал наверху, если ваш CDN ненадежен, получите новый
Энди
источник
Посмотрите на эти функции:
А вот и ванильная версия JavaScript:
Теперь собственно функция:
Просто убедитесь, что AddLocalCss вызывается в голове.
Вы также можете использовать один из следующих способов, описанных в этом ответе :
Загрузить с помощью AJAX
Загрузить с помощью динамически созданного
или
источник
Я бы, наверное, использовал что-нибудь вроде yepnope.js
Взято из ридми.
источник
источник