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

Question

IE 和 Microsoft Edge () 不支持在链接 (<a href="data:) 中使用数据 URI。

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

Modernizr.datauri 不是我要找的，因为它没有说明链接中支持数据 URI 的任何信息，例如对于 Microsoft Edge，它 returns 对象 {over32kb: true}

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

Answer 1

奇怪的是，Microsoft Edge 也不支持数据 URI。旧版本的 IE only allows base64 encoded images of up to 32KB。我最近遇到了一个参考资料 link，它与您在 Moderinzr.

中提到的类似问题有关

Does modernizr check for data uri's?#294

出现they have added a patch for the issue。这是一个数据URI测试。

This post 对这个问题有类似的回答。我希望这些修复应该始终有效。

Answer 2

我对特征检测有同样的需求，但我没有使用 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 答案 () 建议使用：

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

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

更新

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

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

Detect data URI in links support with Modernizr

modernizr

data-uri

microsoft-edge

更新