Question

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

问题是我在网页上有一个小的MCE编辑器。在用户使用此编辑器制作内容之后，内容将作为HTML发送到Web应用程序。然后，此内容将显示在div中。事实上，tinyMCE经常添加具有绝对位置的样式以及与Web应用程序的其余部分打破的东西。

测试时我发现新的HTML 5 iframe srcdoc="<p>Some HTML</p>"和seamless="true"非常适合我的情况。它看起来很无缝，内容风格和我的风格完好无损。遗憾的是，我现在看到Android尚未支持HTML5 srcdoc属性（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>

<强> JS

// 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

使用新的Data URI Scheme。例如：

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

iframe srcdoc的替代方案？

3 个答案: