5

Internet Explorer 不支持 iframe url 的数据 uri 方案（请参阅http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx）。其他浏览器可以。由于浏览器检测包含测试和面向未来的问题，我想使用功能检测来解决这个问题。

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

4

2 回答 2

10

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=='));

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

于 2015-07-08T10:18:02.250 回答
1

如果带有URI 的onload事件触发，则浏览器支持URI。否则，浏览器不支持URI。iframedata:data:data:

示例代码还通过从 URI 向父窗口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');
});

如果你想要更高级的控制，你可以这样称呼它：

iframeDataURISupport.checked ? functionName(iframeDataURISupport) : iframesSupportDataURIs(functionName);

演示

在 JSFiddle 上玩它。

于 2014-08-04T16:31:10.707 回答