工作代码

Question

Internet Explorer不支持iframe网址的数据uri方案（请参阅http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx）。其他浏览器呢。由于浏览器检测加载了测试和面向未来的问题，我想使用特征检测来解决此问题。

那么：如何检测浏览器是否支持iframe的数据uri方案？

Answer 1

This solution by Kevin Martin已经过测试，似乎在IE，FF和Chrome中提供了正确的结果：

function iframeDataURITest(src) {
    var support,
        iframe = document.createElement('iframe');

    iframe.style.display = 'none';
    iframe.setAttribute('src', src);

    document.body.appendChild(iframe);

    try {
        support = !!iframe.contentDocument;
    } catch (e) {
        support = false;
    }

    document.body.removeChild(iframe);

    return support;
}

console.log('Empty data uri', iframeDataURITest('data:;base64,'));
console.log('"*" data uri', iframeDataURITest('data:text/html;base64,Kg=='));

与其他一些建议不同，它是同步的 - 不需要处理超时或回调。

Answer 2

如果带有onload URI的iframe的{{1}}事件触发，则浏览器支持data:个URI。否则，浏览器不支持data: URI。

示例代码还通过从data:向父窗口发送消息来检查是否允许来自data: URI的脚本。

工作代码

iframe

用法

var iframeDataURISupport = { checked: false, supported: false, scriptingSupported: false };

function iframesSupportDataURIs(callback) {
    if (!iframeDataURISupport.checked) {
        var iframe = document.createElement('iframe'), alreadyCalled = false, done = function () {
            if (!alreadyCalled) {
                alreadyCalled = true;

                document.body.removeChild(iframe);

                console.log(iframeDataURISupport);

                callback && callback(iframeDataURISupport);
            }
        }, previousMessageHandler = window.onmessage, dataURI = 'data:text/html,<' + 'script>window.parent.postMessage("data: URIs supported", "*");<' + '/script>';

        window.onmessage = function (e) {
            if (e.data === 'data: URIs supported') {
                window.onmessage = previousMessageHandler;

                iframeDataURISupport.supported = true;
                iframeDataURISupport.scriptingSupported = true;

                done();
            } else {
                window.onmessage.apply(this, arguments);
            }
        };

        iframe.src = dataURI;
        iframe.setAttribute('style', 'display: inline-block; width: 0; height: 0; overflow: hidden; border: 0 none; padding: 0; margin: 0;'.replace(/;/g, ' !important;'));

        iframe.onload = function (e) {
            if (iframe.src === dataURI) {
                iframeDataURISupport.supported = true;

                setTimeout(done, 100);
            } else done();
        };

        document.body.appendChild(iframe);

        setTimeout(done, 500);
    } else {
        setTimeout(function () {
            callback && callback(iframeDataURISupport);
        }, 5);
    }
};

如果您想要更高级的控制，可以像这样调用它：

iframesSupportDataURIs(function (details) {
    alert('This browser ' + (details.supported ? 'supports' : 'does not support') + ' data: URIs. It ' + (details.scriptingSupported ? 'also supports' : 'does not support') + ' scripting from data: URIs');
});

演示

<强> Play with it on JSFiddle.

检测浏览器是否支持使用iframe的数据uri方案

2 个答案:

工作代码

用法

演示