この単純なコードは、Microsoft Edgeを除くすべての場所で完全に機能します。
<a href="data:text/plain;charset=utf-8,Test">link</a>
Microsoft Edgeで「奇妙なことに、Microsoftはこのページを見つけることができません」というエラーが表示されます。
Mozillaのドキュメント の例も同じ結果にはなりません。
Edgeコンソールからの出力は次のとおりです。
このエラーは、新しいタブウィンドウを開くときに発生します。新しいタブでは、デフォルトの検索エンジンに検索クエリとしてdata:text/plain;charset=utf-8,Test
が入力されます。
Microsoft Edgeにはdata:
の定義がないようです
誰かがこれに対する解決策を知っていますか?
更新:残念ながら、IE/EdgeのリンクでデータURIを使用する方法はないようです。リンクでのデータURIサポートの検出に関する関連質問を作成しました: ModernizrでサポートされるリンクでデータURIを検出
IEもMicrosoft EdgeもデータURIへのナビゲートをサポートしていません。MSDNはこれが セキュリティ上の理由から であると主張しています。
唯一の解決策は、file://やhttp://など、isがサポートされているスキームを使用して、コンテンツを含むリソースにリンクすることです。
興味深いことに、IE(私は6よりも古い)の古いバージョン)は、about:URIスキームでデータURIの前兆をサポートしていましたが、この方法でサポートされているのはHTMLだけでした。今日は機能し、「ナビゲーションはキャンセルされました」(以前は「アクションがキャンセルされました」)にリダイレクトされます。
IEおよびEdgeは、データURIをソースとして<img>
タグをサポートしているため、JavaScriptを使用して画像へのリンクを作成し、ドキュメントに書き込むことができます。
<a href="javascript:document.write('<img src=data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC />')">link</a>
IE/EdgeでデータURIをダウンロードするには、 navigator.msSaveBlob を使用してみます。
var a = document.getElementsByTagName('a')[0];
a.addEventListener('click', function (e) {
if (navigator.msSaveBlob) {
var bytes = atob(a.href.split(',')[1]), array = [];
for(var i = 0; i < bytes.length; i++) array.Push(bytes.charCodeAt(i));
navigator.msSaveBlob(new Blob([new Uint8Array(array)], {mime: "text/plain"}), "file.txt");
e.preventDefault();
}
});