替代iframe的srcdoc？(Alternatives to iframe srcdoc?)

一般来说，我是反对使用iframe，但它解决了我的一个特殊问题。

事情是，我有一个网页TinyMCE的编辑器。用户都取得使用这个编辑器中的内容被作为HTML的Web应用程序的内容。然后，这个内容将显示在一个div。事情是，TinyMCE的往往与位置绝对的事情，与万维网应用程序的休息时间加样式。

在测试时，我发现，新的HTML 5 iframe srcdoc="<p>Some HTML</p>"和seamless="true"很适合我的处境。它看起来无缝和内容风格和我的风格是完整的。可悲的是，我现在看到的是，HTML5 srcdoc属性尚未被支持的Android（ http://w3schools.com/html5/tryit.asp?filename=tryhtml5_iframe_srcdoc产生不同的结果在Chrome和Android浏览器）。

所以，问题是：有没有替代的iframe srcdoc将保存接收到的内容的所有风格，它包含在一个div？

Answer 1:

你可以写这样的iframe的文件：

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

Answer 2:

如由评论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);
});

Answer 3:

使用新的数据URI方案。例：

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

文章来源: Alternatives to iframe srcdoc?