Anhängen eines lokalen CSS-Fallback für font-awesome, wenn der CDN nicht geladen werden kann

Ich versuche, ein lokales Fallback für font-awesome zu erstellen, und ich habe einige Probleme beim Hinzufügen des <link> Tags zum <head> Element, wenn das CDN lädt nicht.Anhängen eines lokalen CSS-Fallback für font-awesome, wenn der CDN nicht geladen werden kann

erwartetes Verhalten

Wenn die GET-Anforderung an das CDN erzeugt einen anderen Status als 200 auf Seite laden, ein Link auf die lokale Version von font-awesome sollte das <head> Element hinzugefügt werden.

tatsächliches Verhalten

Eine nicht bestandene GET-Anforderung an das CDN nicht hinzufügen, einen Link auf die lokale Version von Font-awesome zum <head> Elemente.

Das Problem scheint innerhalb des Codeblocks zu geschehen, der mit xmlHttp.onreadystatechange = function() { beginnt.

Wenn ich parentElement.insertBefore(createFallback, referenceElement); außerhalb des xmlHttp.onreadystatechange = function() { Blocks verschiebe, wird die Verbindung zum lokalen Fallback zum Element hinzugefügt. Aber ich verstehe nicht, warum es nicht innerhalb des Codeblocks funktioniert.

Ich möchte in der Lage zu erkennen, ob die CDN ist, und wenn ja, wenden Sie einen Link auf die lokale Version von font-awesome. Ich bin keine Fehlermeldungen in der Konsole empfangen, während der Anzeige der Seite,

Mein Code ist unten:

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

ich wirklich jede Hilfe dankbar würden Sie alle bieten kann!

Danke!

Quelle

2016-05-01 LearningToCode

Aren‘ t fehlt Ihnen 'xmlHttp.send();'? –

@ JakubRożek Ich habe es nach dem XmlHttp.onreadystatechange Block hinzugefügt, und es funktioniert jetzt. Vielen Dank! Ich schätze die Hilfe sehr! – LearningToCode

Die Antwort ist um https://stackoverflow.com/a/27404688/294577.

Aber ich empfehle, den folgenden Code zu verwenden, um den Layout-Reflow zu minimieren, wenn Sie jQuery-Bibliothek verwenden.

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

Es über die createDocumentFragment keine Sorge ist, wie meist in Browsern in http://quirksmode.org/dom/core/#miscellaneous

Quelle

2016-06-29 03:35:33 Gnought

Ich vermied es, ein zusätzliches statisches Markup hinzuzufügen, indem ich einfach diese Idee mit dem body-Element anwendete. –

Sie können mit nur JavaScript auch tun, indem sie auf das Dokument Körper das alles wie so erklärt unterstützt:

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

Quelle

2017-01-26 17:33:53

Anhängen eines lokalen CSS-Fallback für font-awesome, wenn der CDN nicht geladen werden kann

Antwort

Verwandte Themen