在Modernizr支持的链接中检测数据URI [英] Detect data URI in links support with Modernizr

问题描述

在链接(<a href="data:)中使用数据URI(数据URI链接< a href = "数据:在Microsoft Edge中不起作用).

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

我正在尝试使用Modernizr来检测链接支持中的数据URI.

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

Modernizr.datauri并不是我要找的东西，因为它没有告诉您有关链接中支持数据URI的任何信息，例如对于Microsoft Edge，它将返回对象{over32kb: true}

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}

如果浏览器支持链接中的数据URI，如何使用Modernizr进行检测?

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

推荐答案

我对特征检测的需求相同，但是我没有使用Modernizr.我的用例是，我正在使用makePDF库在客户端生成pdf，而无法使用IE或Edge中的数据URI打开PDF.不幸的是，我可以找到的所有功能检测脚本都在测试是否支持图像的数据URI(MS浏览器支持)，因此我必须编写自己的脚本.这是代码(感谢上面的BoltClock的注释):

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

我在IE 11，Edge 25，Firefox 46和Chrome 49中进行了测试.

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

作为旁注，另一个SO答案( https://stackoverflow.com/a/26003382/634650 )建议使用:

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

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

这在IE中有效，但在Edge中无效.

This works in IE but not Edge.

上面的SO答案还包含指向 SO答案的链接. .com/Modernizr/Modernizr/issues/1190"rel =" nofollow noreferrer>有关iframe支持中数据URI特征检测的Modernizr问题.在iframe中打开数据URI基本上与在新窗口中打开数据URI相同，并且在iframe中不支持数据URI的Microsoft浏览器不支持在新窗口中打开它们.此外，在这些位置提到的iframe支持测试是同步的，因此我建议使用它代替我的异步解决方案.

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.

这篇关于在Modernizr支持的链接中检测数据URI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！