加载 fontawesome 的后备计划答案

【问题标题】：Fallback plan for loading fontawesome加载 fontawesome 的后备计划
【发布时间】：2014-12-11 10:11:03
【问题描述】：

更新：为了让我的问题更清楚，我参考了以下代码 sn-p 并实现了类似的东西-

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

根据这段代码 sn-p，我预计 alert('loading from bootstrap cdn'); 的执行会发生。但它没有。代码if (typeof bootstrapcdn == "undefined") 和if (typeof cloudflare == "undefined") 是否检查css 是否已从各自的URL 加载？我是不是哪里出错了？

【问题讨论】：

bootstrapcdn 和 cloudflare 变量从何而来？您正在加载 CSS 文件 (netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css) 而不是 JavaScript 文件。您关于 jQuery 的示例之所以有效，是因为您正在加载一个 JS 文件，所以它与您需要的用例并不完全相同
哦。我不知道我们只能以这种方式加载 js，而不是一般的任何文件。无论如何我可以做到这一点吗？
实际上，我的意思是：在 jQuery 示例中，您正在加载 jQuery JS 文件，该文件确实定义了一个名为 jQuery 的 JavaScript 变量。在您的示例中，您正在加载 font-awesome CSS 文件，该文件确实 DO NOT 定义了任何 JavaScript 变量。所以没有bootstrapcdn或cloudflare这样的JS变量。要测试 CSS 文件是否加载成功，您需要一个我不知道的巧妙技巧。

标签： javascript css cdn font-awesome fallback

【解决方案1】：

您可以通过创建一个使用 FontAwesome 的 'fa' 类的 span 然后测试其字体来测试 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 等）。

【讨论】：

【解决方案2】：

您的 javascript 变量未定义

您的代码有些错误，在两个语句的末尾都使用 )) 双右括号

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

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

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

【讨论】：

感谢您指出这一点。但我想我没有正确地表达我心中的那个问题。代码if (typeof bootstrapcdn == "undefined") 和if (typeof cloudflare == "undefined") 是否检查css 是否已从各自的URL 加载？
不，他们无法检查，因为 javascript 未定义 bootstrapcdn 和 cloudFlare

【解决方案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);
};

【讨论】：