Detect data URI in links support with Modernizr

Question

Using data URI in links (<a href="data:) is not supported in IE and Microsoft Edge (Data URI link <a href="data: doesn't work in Microsoft Edge).

I'm trying to use Modernizr to detect data URI in links support.

Modernizr.datauri is not quite what I'm looking for, as it does not tell anything about support data URI in links, e.g. for Microsoft Edge it returns object {over32kb: true}

How can I detect using Modernizr if data URI in links is supported in browser?

You can brute-force it by sending an Ajax request to a data URI. An exception will occur on IE and Edge. Other than that I'm not sure... — BoltClock, Oct 18 '15 at 12:13

score 2 · Accepted Answer · edited May 23 '17 at 12:15

I had the same need for feature detection but I am not using Modernizr. My use case is that I'm generating a pdf on the client side with the makePDF library and was not able to open the PDFs using data URIs in IE or Edge. Unfortuantely, all the feature detection scripts I could find were testing for support of data URIs for images (which is supported by MS browsers) so I had to write my own. Here's the code (thanks to BoltClock's comment above for the idea):

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);
    }
}

checkDataURISupport()

I tested in in IE 11, Edge 25, Firefox 46, and Chrome 49.

As a side note, another SO answer (https://stackoverflow.com/a/26003382/634650) suggested using:

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

This works in IE but not Edge.

Update

The SO answer above also includes a link to a SO answer referencing a Modernizr issue about feature detection for data URI in iframe support. Opening a data URI in an iframe is basically the same thing as opening one in a new windows and the Microsoft browsers which do not support data URIs in iframes don't support opening them in new windows. Additionally, the test for the iframe support mentioned in those locations is synchronous so I would recommend using it instead of my async solution.

nice solution, thank you for answering my old question! :) – Limon Monte Apr 28 '16 at 18:17 — Limon Monte, Apr 28 '16 at 18:17
This gives me false positives in Edge now. – kzh Mar 08 '18 at 15:36 — kzh, Mar 08 '18 at 15:36

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

It is weird that even Microsoft Edge is not supporting the data URI. Older versions of IE only allows base64 encoded images of up to 32KB. I had come across a reference link lately which relates to the similar issue you have mentioned with Moderinzr.

Does modernizr check for data uri's?#294

It appears they have added a patch for the issue. It is a data URI test.

This post has the similar answer regarding the issue. I hope these fixes should work throughout.

edited May 23 '17 at 12:31

Community

1
1

answered Oct 29 '15 at 05:45

Rohit416

3,416
3
24
41

2

Appreciate your reply, but it doesn't seem what I'm looking for. My quiestion is not about data URI support, but about data URI **in links**. Edge supports data URI in images or CSS, but not in links. – Limon Monte Oct 29 '15 at 11:35
Amm hmm, okay. Well yes data URI's are partially supported in browsers by Microsoft. `over32kb` is subproperty of `Modernizr.datauri` and `true` for all (Edge) other than IE-8 and less. Do not have much to say but i believe you may have to create workaround for this (@__@) – Rohit416 Oct 30 '15 at 06:37

Detect data URI in links support with Modernizr

2 Answers2

Update

Linked