当 CDN 加载失败时，为 font-awesome 添加本地 CSS 后备答案

【问题标题】：Appending a local CSS fallback for font-awesome when the CDN fails to load当 CDN 加载失败时，为 font-awesome 添加本地 CSS 后备
【发布时间】：2016-08-26 13:18:43
【问题描述】：

我正在尝试为 font-awesome 创建一个本地后备，当 CDN 无法加载时，我在将 <link> 标记添加到 <head> 元素时遇到了一些问题。

预期行为

如果对 CDN 的 GET 请求在页面加载时产生的状态不是 200，则应将指向本地版本 font-awesome 的链接添加到 <head> 元素。

实际行为

对 CDN 的失败 GET 请求不会将指向本地版本 font-awesome 的链接添加到 <head> 元素。

问题似乎发生在以xmlHttp.onreadystatechange = function() { 开头的代码块中。

当我将parentElement.insertBefore(createFallback, referenceElement); 移到xmlHttp.onreadystatechange = function() { 块之外时，本地回退的链接被添加到<head> 元素中就好了。但我不明白为什么它在代码块中不起作用。

我希望能够检测 CDN 是否已关闭，如果是，请应用指向本地版本 font-awesome 的链接。查看页面时，我在控制台中没有收到任何错误消息，

我的代码如下：

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

非常感谢大家能提供的任何帮助！

谢谢！

【问题讨论】：

你不缺xmlHttp.send();吗？
@JakubRożek 我在 xmlHttp.onreadystatechange 块之后添加了它，现在它正在工作。非常感谢！非常感谢您的帮助！

标签： javascript css fonts font-awesome cdn

【解决方案1】：

答案在https://stackoverflow.com/a/27404688/294577。

但如果您使用 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 中所述的浏览器中支持

【讨论】：

通过使用 body 元素应用这个想法，我避免了包含额外的静态标记。

【解决方案2】：

您也可以只使用 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>

【讨论】：