Data URI link <a

问题:

This simple code works perfectly everywhere except Microsoft Edge:

<a href="data:text/plain;charset=utf-8,Test">link</a>

[JSFiddle]

In Microsoft Edge I'm getting "That's odd...Microsoft can't find this page" error:

Examples from Mozilla documentation also do not working with the same result.

Here's the output from Edge console:

This error occurs when opening a new edge window, on new tabs it inputs data:text/plain;charset=utf-8,Test as search query into the default search engine.

It seems like Microsoft Edge has no definition for data:

Does anyone know a solution to this?

---

Update: unfortunately, it seems that there's no way to use data URI in links in IE/Edge. I've created related question about detecting data URI support in links: Detect data URI in links support with Modernizr

回答1:

Neither IE nor Microsoft Edge support navigating to data URIs. MSDN claims that this is for security reasons.

The only solution is to link, using a scheme that is supported such as file:// or http://, to some resource that contains the content.

Interestingly enough, older versions of IE (I'm talking older than 6) supported a precursor to data URIs in the about: URI scheme, though only HTML was supported this way. Those URIs no longer work today and simply redirect to "Navigation canceled" (previously "Action canceled").

回答2:

Since IE and Edge do support <img> tags with a data URI as the source, you can fudge a link to an image using javascript to write to the document:

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