So ermitteln Sie, ob der Browser Daten-URIs für Hyperlinks unterstützt

Question

Gibt es eine Möglichkeit festzustellen, ob ein Browser die Verwendung von Daten-URIs für Hyperlinks neben dem Browser-Sniffing unterstützt?

Hier ist der Kontext:

ich einen Link zu erwecken, dass entweder lädt eine CSV-Datei mit Informationen über JavaScript erzeugen ein praktischen Daten URI oder, wenn der Browser nicht unterstützt die Verwendung von Daten-URIs für Hyperlinks, generiert eine HTML-Tabelle des gewünschten Inhalts.

Im Moment überprüft mein Code die Existenz der window.URL Eigenschaft, die nicht in IE9 und darunter existiert. (Dies funktioniert für jetzt in Ordnung, weil der IE-Benutzer muß ich läuft im Kompatibilitätsmodus unterstützen, die IE8 emuliert.)

if(window.URL){ 
    downloadLink.href = "data:text/csv;charset=utf-8," + encodeURIComponent(data); 
    downloadLink.setAttribute("download","download.csv"); 
}else{ 
    downloadLink.href= "#"; 
    downloadLink.innerHTML = "table view"; 
    downloadLink.onclick = function(){ 
     // build and display HTML table 
     return false; 
    }; 
} 

Allerdings gibt es einige Überschneidungen mit neueren Versionen von Internet Explorer (10, 11, sowie Edge), dass sie das window.URL-Objekt unterstützen, aber nicht erlauben Daten-URIs für Hyperlinks.

Wie stelle ich sicher, dass der Link zum Herunterladen einer CSV-Datei niemals in einem Browser angezeigt wird, der solche Verfeinerungen nicht unterstützt?

Answer 1

Ich glaube, ich habe die Antwort gefunden. Versuchen Sie, das Vorhandensein eines download Attributs auf einem <a> Element zu erkennen.

var browserSupportsDataURIsForHyperlinks = 
    typeof document.createElement("a").download !== "undefined"; 

oder

var browserSupportsDataURIsForHyperlinks = 
    "download" in document.createElement("a"); 

... In meinem Fall hatte ich bereits einen Anker-Tag mit (downloadLink) zu arbeiten, so dass ich nicht neu erstellen müssen:

if(typeof downloadLink.download !== "undefined"){ 
    downloadLink.href = "data:text/csv;charset=utf-8," + encodeURIComponent(data); 
    downloadLink.setAttribute("download","download.csv"); 
}else{ 
    downloadLink.href= "#"; 
    downloadLink.innerHTML = "table view"; 
    downloadLink.onclick = function(){ 
     // build and display HTML table 
     return false; 
    }; 
} 

Wenn jemand mit diesem Ansatz etwas falsch sieht, lass es mich wissen.