logo标签列表

替代iframe srcdoc的方法？

csshtmliframe
17

通常情况下，我不赞成使用iframe，但它解决了我的一个特定问题。

问题是我在网页上使用了tinyMCE编辑器。用户使用此编辑器制作内容后，将内容以HTML形式发送到Web应用程序。然后在一个div中显示此内容。问题是tinyMCE经常添加带有绝对位置的样式和其他与Web应用程序不兼容的元素。

测试时，我发现新的HTML5 iframe srcdoc="<p>Some HTML</p>" 和 seamless="true" 对于我的情况来说非常完美。它看起来无缝，并且内容样式和我的样式完好无损。不幸的是，我现在发现Android尚未支持HTML5 srcdoc属性（http://w3schools.com/html5/tryit.asp?filename=tryhtml5_iframe_srcdoc在Chrome和Android浏览器中呈现不同结果）。

因此，问题是：是否有任何替代方案可以保存接收内容的所有样式并将其包含在div中，而不是使用iframe srcdoc？

更换编辑器？网络上有很多编辑器。 - zb'
1
您可能还喜欢这个示例，它演示了如何在相同的源上使用iframe。http://jsfiddle.net/oceog/r4VPr/ - zb'
谢谢，有些修改后就解决了！ - Sindre
我要指出的是，Edge 似乎也不支持 srcDoc - https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6261334-iframe-srcdoc-attribute - nevada_scout
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();
9

根据eicto的评论建议，可以使用jquery在ready事件中填充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);
});
1
如果任何内容是不受信任和未经沙盒处理的，请不要这样做——如果用户粘贴代码片段，这种情况可能发生... - Brett Zamir
1
使用新的数据URI方案。 示例：
var content = "<html></html>";<br>document.getElementById("my_iframe_id").src = "data:text/html;charset=UTF-8," + content;
1
数据URI仅支持以下元素和/或属性。对象（仅限图像） img input type=image 链接 接受URL的CSS声明，例如background、backgroundImage等。 - jbiddick
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接