Определить, поддерживает ли браузер схему данных URI с помощью фреймов

Question

Internet Explorer не поддерживает схему URI данных для URL-адресов iframe (см. http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx). Другие браузеры делают. Поскольку обнаружение браузера загружено проблемами тестирования и будущего, я хочу использовать функцию обнаружения, чтобы обойти эту проблему.

Итак: как я могу определить, поддерживает ли браузер схему данных URI для фреймов?

Answer 1

Это решение Кевина Мартина протестировано и дает правильные результаты в 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 событие iframe с data: URI срабатывает, браузер поддерживает data: URIs. В противном случае браузер не поддерживает data: URIs.

Пример кода также проверяет, разрешен ли сценарий от 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.