Erreurs du schéma D'URI des données et D'Internet Explorer 9

pour moi, trouver document.execCommand était un sauveur de vie. Il utilise le iFrame comme certains des autres exemples, mais le execCommand rend la fonctionnalité Save As cohérente.

voici un exemple

var getCsvFileForIE = function(target) {
  var csvData = target.attributes["data-csv"].value;
  if (navigator.appName === "Microsoft Internet Explorer") {
    csvData = decodeURIComponent(csvData);

    var iframe = document.getElementById('csvDownloadFrame');
    iframe = iframe.contentWindow || iframe.contentDocument;

    csvData = 'sep=,\r\n' + csvData;

    iframe.document.open("text/html", "replace");
    iframe.document.write(csvData);
    iframe.document.close();
    iframe.focus();
    iframe.document.execCommand('SaveAs', true, 'data.csv');
  } else {
    if (console && console.log) {
      console.log('Trying to call getCsvFileForIE with non IE browser.');
    }
  }
};

nous le faisons pour IE et pour tous les autres navigateurs nous utilisons le lien URI de données standard. Vous pouvez voir le "1519160920 complet" gist pour plus de détails. Une pointe de chapeau à Andrew Blondeau pour la direction .

mise à jour

une meilleure façon de déterminer si le navigateur supporte un URI de données

supportsDataUri = 'download' in document.createElement('a');

il semble aussi QU'IE rencontre toujours des problèmes. Pour IE10+ vous pourriez avoir besoin d'utiliser msSaveOrOpenBlob et pour IE8/9 Vous avez encore besoin de faire le execCommand dans un iFrame .

UPDATE 2

il y a un Modernizr issue pour détecter le schéma uri de données. Il fait référence à une autre réponse . Assurez-vous de vérifier ces.

Internet Explorer does support Data URIs (la ressource est un peu dépassée). Il a cependant certaines considérations de sécurité qui l'empêchent de permettre des tentatives malveillantes pour rediriger les utilisateurs, ou autrement permettre aux pirates de s'engager dans le phishing sans exiger des scripts tiers ou des ressources hébergées.

cela signifie que vous pouvez L'utiliser avec JavaScript:

<script src="data:text/javascript;base64;YWxlcnQoIldvcmtzIik7"></script>

feuilles de Style en cascade (avec ou sans base64 encodage):

<link rel="stylesheet" href="data:text/css;base64,Ym9keXtjb2xvcjpncmVlbn0=">
<link rel="stylesheet" href="data:text/css,body%7Bcolor:green%7D">

ou même des images:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QBgRXhpZgAASUkqAAg
AAAACADEBAgAHAAAAJgAAAGmHBAABAAAALgAAAAAAAABQaWNhc2EAAAMAAJAHAAQAAAAwMjIwAqAEAAE
AAAAbAAAAA6AEAAEAAAAbAAAAAAAAAP/bAIQAAwICAwICAwMDAwQDAwQFCAUFBAQFCgcHBggMCgwMCwo
LCw0OEhANDhEOCwsQFhARExQVFRUMDxcYFhQYEhQVFAEDBAQFBAUJBQUJFA0LDRQUFBUUFBQUFBQUDxQ
QFBUUExUVFBQUEBUUFQ4UFBQUEhISDxURFQ8SFRQSEBAQDQ8P/8AAEQgAGwAbAwERAAIRAQMRAf/EABg
AAAMBAQAAAAAAAAAAAAAAAAUHCAIG/8QAKxAAAQMDAwMDAwUAAAAAAAAAAQIDBAUGEQASIQciMQgTFEF
RgRVhcaHD/8QAGQEAAwEBAQAAAAAAAAAAAAAABAUGBwMC/8QALxEAAQMCAgcHBQEAAAAAAAAAAQACAwQ
RBSESMUFRYZHBEyJxobHR4RVDgfDxFP/aAAwDAQACEQMRAD8AGdeKdd3Um670bjz0waNQpzVKpVOWtSE
uqSgKefIztKipQwSOU4wRjuBq6tj52h2YTbA8Nkp6UmMaLzzS1sz0ru1qqNyrkrqWIiMrfjsjctw4HGT
wM/ngaEmxJjBaNqdRYPJpaczr8FTXRY1h7p9dVg1GpSZzNBkobYcec3qfgup9xjefqUqQ4n+ED651RYf
Utla2UjMKBx6hdTvdEw2ac7JR13psz+rytkUqTv8AITq1bVZDNZo6ncCQFYFH9O1vS+lVrOW1bD0REtl
uW8hi45Ty0hSAUkOrKlLyNvA27eBnCdZbUxNv3GjkFudDWvved55k9QpI9S0y7ujfqUk2jZ4bcaetuFP
MSSFyENrW84h1zevcvOEgZzj9hnQ76aAQh0+Wezw1JjR1dVPO5kJuNxJ360Stj1LU/ooqREuuA9Krs4s
LqM2A0lbDSACG0kDlRTlZKUjHJx5xplhjWui7mq+Xkk2PhxqgDrDRfxuUmL89awuO8KrUU202lDz3Z7K
vbSpIASlW3ZwSACR9ydUsc/ZtDBs4qLkw4TPMjjmeCGSurEun2rRqJBvStJq5U6iSiLUZHx0BKRtQ2pT
hJwPBASnggDxqUjDzdxBtx+PlaTpQEhha38DqegCM2PdL6apMrkyHKn1FuIiOuoyCpbiEA57nFLVkcnC
OAST4OgqqMygMLsr6lQUZigvIxlstdv3pdbqsGy7nn1ym3pcEy3am06hwvsKZMYtrYQUZK1pVu2r5SkK
APPGjIJXQQt7Jml/VJ4lCKmre50lj8JYVDopYQmu/GviZJYz2OtQS6lQ+4UlZB/B16+oz7YDzCB/wsH3
fJIx+W8qRKWXFbxIUQrPPCiB/QGmLNQQriS4lODo1Mk1/qBQaJUJcmVSXJrYXEW+v21dw8gHnQNaBHA6
Ros62tOaKV8kjY3OJbuWrXkya/wBV6z8ubMCn1y1OLjSnI61YXwNzaknaMDtzjgccDXKoPZUzdEDZsB9
UFGTJO7SO/wBV0kq3mRIcHzaue4+axLP+uk/bO3DkPZMxE3jzPuv/2Q==">

vous ne pouvez pas, cependant, utiliser ceux-ci avec window.open ou iframe , car ceux-ci permettraient certaines choses très dangereuses, y compris hameçonnage avec les données URIs :

<iframe src="data:text/html;base64,PGJ1dHRvbiBpZD0iX3BheXBhbCI+TG9nIGludG8gUGF5cG
FsPC9idXR0b24+DQo8c2NyaXB0Pg0KICAgIF9wYXlwYWwuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCB
mdW5jdGlvbiAoKSB7DQogICAgICAgIGFsZXJ0KCJUaGlzIGNvdWxkIGhhdmUgYmVlbiB1Z2x5IGZvciB5
b3UuLi4iKTsNCiAgICB9LCBmYWxzZSk7DQo8L3NjcmlwdD4="></iframe>

ce dernier exemple aurait très bien pu être une réplique complète de L'écran de connexion PayPal. Au lieu de cela, c'est juste un bouton HTML avec un event-handler lié et d'écoute pour les clics. Des hackery semblables pourraient venir par le biais de window.open :

window.open("data:text/html;base64,PHN0cm9uZz5XQVQhPzwvc3Ryb25nPg==", "OHAI");

donc Internet Explorer 10 supporte cette fonctionnalité, mais elle protège l'utilisateur final de ceux qui l'utiliseraient malicieusement. Je suis sûr que Microsoft se fera un plaisir de lever cette restriction quand et s'ils déterminent une meilleure façon de protéger leur base d'utilisateurs.

Jusqu'à ce que les choses changent, vous devez trouver une autre façon d'inclure vos fichiers FLV. D'un autre côté, vous ne voudrez peut-être pas partager données réelles comme ceci de votre application sur le débordement de pile.

selon la réponse de Franco ici: CSV File export For IE

il suffit de créer un objet Blob avec elle

//Save file
if (isMicrosoftIE()) {
    csvData = decodeURIComponent(csv);

    if(window.navigator.msSaveBlob){
        var blob = new Blob([csvData],{ type: "application/csv;charset=utf-8;"});
        navigator.msSaveBlob(blob, filename);
    }
}
else
{
    csvData = "data:application/csv;charset=utf-8," + encodeURIComponent(csv);
    $(this).attr({
        "href": csvData,
        "target": "_blank",
        "download": filename
    });
}

Et ça marche pour moi!

deux solutions alternatives sont expliquées ici: http://sparecycles.wordpress.com/2012/03/08/inject-content-into-a-new-iframe/

la principale différence que je peux dire est que l'iframe a la même origine que la page d'origine, qui pourrait ne pas être désirée (Je ne suis pas sûr des implications de sécurité par exemple ce que le referer ou les cookies pourraient être pour les ressources chargées).

un exemple d'utilisation de la technique javascript: scheme est ici: http://jsbin.com/uhenuz/4 (S'il est utilisé avec https aurait besoin de googling supplémentaire et de bons tests pour vérifier que le mélange https/avertissement http ne peut jamais apparaître.)

je suis arrivé ici pendant que je cherchais un moyen de détecter la fonctionnalité pour le soutien d'uri de données de dossiers (PDFs dans mon cas). L'approche Modernizr de vérifier le soutien d'image n'était pas assez bon puisque Internet Explorer 11 et Edge 25 soutiennent que, mais ne supportent pas les types de fichiers comme application/pdf. L'approche de Snekse consistant à vérifier l'attribut de téléchargement a fonctionné sur IE mais pas sur Edge. Finalement, j'ai écrit mon propre script de détection de fonctionnalités en utilisant un appel AJAX pour essayer d'ouvrir un URI de données et de vérifier pour les erreurs. C'est le script que j'ai utilisé (testé dans IE 11, Edge 25, Firefox 46, et Chrome 49):

checkDataURISupport(function (checkResult) {
    if (checkResult) {
        alert('Files in data URIs are supported.');
    } else {
        alert('Files in data URIs are NOT supported.');
    }
})

function checkDataURISupport(callback) {
    try {
        var request = new XMLHttpRequest();
        request.onload = function reqListener() {
            callback(true);
        };
        request.onerror = function reqListener() {
            callback(false);
        };
        request.open('GET', 'data:application/pdf;base64,cw==');
        request.send();
    } catch (ex) {
        callback(false);
    }
}

mise à Jour

j'ai réalisé que n'importe quel code qui teste pour L'URI de données est iframe support teste aussi pour l'ouverture d'un URI de données dans une nouvelle fenêtre. Ainsi, la solution mentionnée dans cette réponse "so 151990920" et liée à la mise à jour de la réponse de Snekse est techniquement supérieure et je recommande l'utilisation il au lieu du code ci-dessus.