Question

我尝试为font-awesome创建本地回退，并且当CDN无法加载时，我在向<link>元素添加<head>标记时遇到了一些问题。

预期行为

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

实际行为

向CDN发出的GET请求失败，并未向<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>

我非常感谢你们所能提供的任何帮助！

谢谢！

Answer 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

中所述的浏览器主要支持

import h5py as h5
data='dataset.mat'
f=h5.File(data, 'r')

并不用担心

Answer 2

您也可以通过定位文档正文来完成所有这些操作：

{{1}}

当CDN无法加载时，为font-awesome添加本地CSS回退

2 个答案: