Internet Explorer: Ignoriere unbekannte ES6-Syntax

Question

Um einen Fehler zu beheben, der nur in Firefox auftritt, muss ich das loaded Versprechen eines FontFace verwenden. Ich verwende derzeit den folgenden Code für die:

if (document.fonts) { 
 
    for (var fontFace of document.fonts.values()) { 
 
     if (fontFace['family'] == fontFamily) { 
 
      fontFace.loaded.then(doStuff); 
 
     } 
 
    } 
 
} else { 
 
    doStuff(); 
 
}

Dies funktioniert und zielt nur den Browser, die den Schriftart Laden API unterstützen. Aber wegen der for .. of protokolliert Internet Explorer einen Fehler und beendet die JS-Ausführung. Putting den Code in einem try .. catch Block funktioniert nicht, ignorieren den Fehler über window.onerror würde wahrscheinlich funktionieren, aber ist ziemlich hacky.

Gibt es eine Möglichkeit, über document.fonts.values zu iterieren, das auch vom IE unterstützt wird, oder kennen Sie eine bessere Möglichkeit, das loaded Versprechen in Browsern zu verwenden, die es unterstützen?

Answer 1

würde ich

const fontFace = Array.from(document.fonts).find(face => face.family === fontFamily); 
if (fontFace) { 
    fontFace.loaded.then(doStuff); 
} 

Array.from ein Array aus einem iterable schafft, empfehlen und dann können Sie die normale Array.prototype.some für die Spiele überprüfen verwenden.

Sie könnten dann Ihren ganzen Scheck an

const fontFace = document.fonts && 
    Array.from(document.fonts).find(face => face.family === fontFamily); 

if (fontFace) fontFace.loaded.then(doStuff); 
else doStuff(); 

vereinfachen vorausgesetzt, Sie doStuff wollen, wenn nicht die Schriftart Gesichter passen entweder laufen.

Answer 2

Leider kann for-of Iteration in Ihrem Code nicht verwendet werden, wenn es in einem nicht unterstützten Browser ausgeführt werden soll. Der Fehler tritt auf, wenn der Code analysiert wird, bevor Ihre Bedingung ausgeführt und überprüft wird.

Wenn Sie wirklich for-of verwenden möchten, müssen Sie ein spezielles JS-Bundle für moderne Browser erstellen oder Ihren Code mit Babel verarbeiten, um Ihren Code in es5-kompatibel zu konvertieren.

Answer 3

löste ich das Problem mit dem folgenden Code:

if (document.fonts) { 
 
    var iter = document.fonts.values(); 
 
    do { 
 
     var item = iter.next(); 
 
     var fontFace = item.value; 
 
     if (fontFace && fontFace['family'] == fontFamilyStr) { 
 
      fontFace.loaded.then(doStuff); 
 
     } 
 
    } while (!item.done); 
 
} else { 
 
      doStuff(); 
 
}

IE mehr keinen Fehler protokollieren und der Code funktioniert in Firefox/Chrome.