Альтернативы iframe srcdoc?

В общем, я против использования iframes, но он решил определенную проблему.

Дело в том, что на веб-странице у меня есть tinyMCE-редактор. После того, как пользователь сделал контент с помощью этого редактора, контент отправляется как HTML в веб-приложение. Этот контент затем отображается в div. Дело в том, что tinyMCE часто добавляют стили с абсолютным положением и вещами, которые ломаются с остальной частью веб-приложения.

При тестировании я узнал, что новый HTML 5 iframe srcdoc="<p>Some HTML</p>" и seamless="true" был идеален для моей ситуации. Он выглядел без проблем, а стиль содержимого и мой стиль были неповрежденными. К сожалению, теперь я вижу, что атрибут s5cdoc HTML5 еще не поддерживается Android (http://w3schools.com/html5/tryit.asp?filename=tryhtml5_iframe_srcdoc дает разные результаты в браузере Chrome и Android).

Итак, вопрос: есть ли альтернатива iframe srcdoc, которая сохранит весь стиль полученного контента и будет содержать его в div?

Ответ 1

Как было предложено eicto по комментариям, jquery можно использовать для заполнения iframe в готовом событии. Чтобы настроить высоту iframe на высоту содержимого, нужно было использовать некоторые грязные хаки, но код, который я использовал, более или менее:

HTML

<!-- IMPORTANT! Do not add src or srcdoc -->
<!-- NOTICE!    Add border:none to get a more "seamless" integration -->
<iframe style="border:none" scrolling="no" id="myIframe">
    Iframes not supported on your device
</iframe>

// Wait until iFrame is ready (body is then available)
$('#myIframe').ready(function() {

    var externalHtml = '<p>Hello World!</p>';

    // Find the body of the iframe and set its HTML
    // Add a wrapping div for height hack
    // Set min-width on wrapping div in order to get real height afterwords
    $('#myIframe').contents().find('body')
        .html('<div id="iframeContent" style="min-width:'+$('body').width()+'px">'
            +externalHtml
            +'</div>'
    );

    // Let the CSS load before getting height 
    setTimeout(function() {
        // Set the height of the iframe to the height of the content
         $('#myIframe').css('height', 
             $('#myIframe').contents()
             .find('#iframeContent').height() + 'px' 
         );
    },50);
});

Ответ 2

Вы можете записать в документ iframe следующим образом:

var iframeDocument = document.querySelector('#foo').contentWindow.document;
var content = '<html></html>';
iframeDocument.open('text/html', 'replace');
iframeDocument.write(content);
iframeDocument.close();

Ответ 3

Используйте новый Схема URI данных. Пример:

var content = "<html></html>";
document.getElementById("my_iframe_id").src = "data:text/html;charset=UTF-8," + content;