17

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

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

在测试时，我发现新的 HTML 5iframe 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 中？

4

3 回答 3

22

您可以像这样写入 iframe 的文档：

const html = '<body>foo</body>';
const iframeDocument = document.querySelector('iframe#foo').contentDocument;
const content = `<html>${html} </html>`;
iframeDocument.open('text/html', 'replace');
iframeDocument.write(content);
iframeDocument.close();
于 2013-07-17T18:21:46.983 回答
9

正如 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);
});
于 2012-11-04T12:01:55.583 回答
1

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

var content = "<html></html>";
document.getElementById("my_iframe_id").src = "data:text/html;charset=UTF-8," + content;
于 2017-05-20T16:37:50.547 回答