Добавление локальной резервной копии CSS для шрифтов - удивительно, когда CDN не загружается

89
4

Я пытаюсь создать локальную резервную копию для шрифта - потрясающе, и у меня возникают проблемы с добавлением <link> в элемент <head> когда CDN не загружается.

Ожидаемое поведение

Если запрос GET в CDN создает статус, отличный от 200 при загрузке страницы, к элементу <head> следует добавить ссылку на локальную версию шрифта-awesome.

Фактическое поведение

Неисправный запрос GET для CDN не добавляет ссылку на локальную версию шрифта-awesome на элемент <head>.

Проблема, похоже, происходит внутри блока кода, который начинается с xmlHttp.onreadystatechange = function() {.

Когда я перемещаю parentElement.insertBefore(createFallback, referenceElement); вне xmlHttp.onreadystatechange = function() { block, ссылка на локальную xmlHttp.onreadystatechange = function() { добавляется к элементу <head> просто отлично. Но я не понимаю, почему он не работает в блоке кода.

Я хотел бы узнать, нет ли CDN, и если да, примените ссылку на локальную версию шрифта - удивительный. Я не получаю никаких сообщений об ошибках в консоли при просмотре страницы,

Мой код ниже:

<!doctype html>
<html class="no-js" lang="">
<head>
<link id="fontAwesomeFallback" rel="stylesheet" href="#">
<script>
// Define Variables
var createFallback = document.createElement("link");
createFallback.type = "text/css";
createFallback.rel = "stylesheet";
createFallback.href = "/css/font-awesome.css";

var referenceElement = document.getElementById("fontAwesomeFallback");
var parentElement = referenceElement.parentNode;

// Open Http Request
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css", true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status !== 200) {
parentElement.insertBefore(createFallback, referenceElement);
console.log("Local fallback appended to head element");
}
}
</script>
</head>
<body>
</body>
</html>

Я бы очень признателен за любую помощь, которую вы можете предложить!

Благодарю!

спросил(а) 2016-05-01T22:51:00+03:00 4 года, 4 месяца назад
1
Решение
57

Ответ указан по адресу qaru.site/questions/62726/....

Но я рекомендую использовать следующий код, чтобы минимизировать оплату макета, если вы используете библиотеку jQuery.

<div id="FontAwesome_fallback" style="display:none"></div>    
<script async>(function($) {
var $span = $('<span class="fa" style="display:none"></span>');
$('#FontAwesome_fallback').append($span)
var f = $span.css('fontFamily');
if (f !== 'FontAwesome') {
$('head').append('<link href="/css/font-awesome.css" rel="stylesheet">');
}
})(jQuery);
</script>

Там нет беспокойства о createDocumentFragment как в основном поддерживается в браузерах, указанных в http://quirksmode.org/dom/core/#miscellaneous

ответил(а) 2016-06-29T06:35:00+03:00 4 года, 3 месяца назад
40

Вы также можете сделать это всего лишь с помощью JavaScript, настроив таргетинг на тело документа так:


<script async>(function($){
var $span = $('<span class="fa" style="display:none">'</span>').appendTo('body');
if ($span.css('fontFamily') !== 'FontAwesome' ) {
$('head').append('<link href="~/assets/shared/css/vendor/font-awesome-4.7.0.min.css" rel="stylesheet">');
}
$span.remove();
})(window.jQuery);
</script>

ответил(а) 2017-01-26T20:33:00+03:00 3 года, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема