modernizr - 使用 Modernizr 检测链接支持中的数据 URI

Question

IE 和 Microsoft Edge ( Data URI link <a href="data: doesn't work in Microsoft Edge ) 不支持在链接 ( <a href="data: ) 中使用数据 URI。

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

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

如何使用 Modernizr 检测浏览器是否支持链接中的数据 URI？

Answer 1

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

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 中进行了测试。

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

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

这适用于 IE，但不适用于 Edge。

更新

上面的 SO 答案还包含指向 a SO answer 的链接。引用a Modernizr issue关于 iframe 支持中数据 URI 的功能检测。在 iframe 中打开数据 URI 与在新窗口中打开数据 URI 基本相同，并且不支持 iframe 中数据 URI 的 Microsoft 浏览器也不支持在新窗口中打开它们。此外，这些位置中提到的 iframe 支持测试是同步的，因此我建议使用它而不是我的异步解决方案。