Question

更新：让我的问题更加清晰，我提到了以下代码片段并实现了类似的东西 -

<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'));

现在它也应该工作如果它进入第一个if语句你必须写这样的代码，否则它不会去其他

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＆＃39; fa＆＃39;类然后测试它的字体。然后删除跨度并返回结果。

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;
}

此函数将为您提供true或false结果，因此如果为false，您可以使用加载本地回退（document.write等）。

Answer 3

创建一个向正文添加<span>的函数，以检查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);
};

装载fontawesome的后备计划

3 个答案: