Запасной план погрузки fontawesome

Question

UPDATE: сделать мой вопрос яснее, я упомянул следующий фрагмент кода и реализовать что-то similar-

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
if (typeof jQuery == 'undefined') { 
    document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E")); 
} 
</script> 

я загружаю font-awesome.css и запасной вариант в моем JSP это ПУТЬ

<link type="text/css" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" /> 

<script> 
    function fallbackForFontAwesome() { 
     if (typeof bootstrapcdn == "undefined") { 
      document.write(unescape('%3Clink type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.1/css/font-awesome.min.css" /%3E')); 
      if (typeof cloudflare == "undefined") { 
       document.write(unescape('%3Clink type="text/css" rel="stylesheet" href="/common/fontawesome/css/font-awesome.min.css" /%3E')); 
      } else { 
       alert('loading from cloudfare'); 
      } 
     } else { 
      alert('loading from bootstrap cdn'); 
     } 
    } 
    fallbackForFontAwesome(); 
</script> 

в соответствии с этим фрагмент кода, я ожидал исполнения alert('loading from bootstrap cdn'); произойдет. Но это не так. Учитывается ли код if (typeof bootstrapcdn == "undefined") и if (typeof cloudflare == "undefined"), если css загружен из соответствующих URL-адресов или нет? Я что-то не так?

Answer 1

Ваш Javascript переменная не определена

Ваш код не так-то использовать)) двойные закрывающие скобки в конце в обоих заявлениях

document.write(unescape('%3Clink type="text/css" rel="stylesheet" href="/common/fontawesome/css/font-awesome.min.css" /%3E')); 

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

function fallbackForFontAwesome() { 
    if (typeof bootstrapcdn == "undefined") { 
     document.write(unescape('%3Clink type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.1/css/font-awesome.min.css" /%3E')); 
     if (typeof cloudflare == "undefined") { 
      document.write(unescape('%3Clink type="text/css" rel="stylesheet" href="/common/fontawesome/css/font-awesome.min.css" /%3E')); 
     } 
     else { 
      alert('loading from cloudflare cdn'); 
     } 
    } else { 
     alert('loading from bootstrap cdn'); 
    } 
} 
fallbackForFontAwesome(); 

Answer 2

Вы можете проверить, если FontAwesome загружен, создавая промежуток, который использует класс «fa» FontAwesome, а затем тестирует его шрифт. Затем вы удаляете диапазон и возвращаете результат.

function isFontAwesomeLoaded() { 
    var span = document.createElement('span'); 
    span.className = 'fa'; 
    document.body.appendChild(span); 
    var result = (span.style.fontFamily === 'FontAwesome'); 
    document.body.removeChild(span); 
    return result; 
} 

Эта функция даст вам истинный или ложный результат, так что вы можете использовать, чтобы загрузить локальный запасной вариант (document.write и т.д.), если ложно.

Answer 3

Создайте функцию, которая добавилак телу, чтобы проверить, загружен ли тип шрифта FontAwesome (через CDN).

window.onload = function() { 
    var span = document.createElement('span'), 
    headHTML = document.head.innerHTML; 

    span.className = 'fa'; 
    span.style.display = 'none'; 
    document.body.insertBefore(span, document.body.firstChild); 

    //if 'FontAwesome' didn't load, add a local fallback link to the head 
    if (span.style.fontFamily !== 'FontAwesome') { 
    headHTML += '<link rel="stylesheet" href="path/to/local/fallback.css">'; 
    document.head.innerHTML = headHTML; 
    } 

    document.body.removeChild(span); 
};