Html iframe srcdoc 的替代品？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13214419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alternatives to iframe srcdoc?
提问by Sindre
Generally I am against the use of iframes, but it solved a particular problem of mine.
通常我反对使用 iframe，但它解决了我的一个特定问题。
The thing is that I have a tinyMCE-editor at a webpage. After the user have made the content using this editor the content is sent as HTML to a web application. This content is then displayed in a div. Thing is that tinyMCE often add styles with position absoluteand things that break with the rest of the web applicaiton.
问题是我在网页上有一个 tinyMCE 编辑器。用户使用此编辑器制作内容后，内容将作为 HTML 发送到 Web 应用程序。然后该内容显示在一个 div 中。事情是，tinyMCE 经常添加具有绝对位置的样式以及与 Web 应用程序的其余部分中断的东西。
When testing I found out that the new HTML 5 iframe srcdoc="<p>Some HTML</p>"and seamless="true"was perfect for my situation. It looked seamless and the contents style and my style was intact. Sadly I now see that the HTML5 srcdoc attribute is not yet supported by Android (http://w3schools.com/html5/tryit.asp?filename=tryhtml5_iframe_srcdocyields different result in chrome and android browser).
在测试时，我发现，新的HTML 5iframe srcdoc="<p>Some HTML</p>"和seamless="true"很适合我的处境。它看起来无缝，内容风格和我的风格完好无损。遗憾的是，我现在看到 Android 尚不支持 HTML5 srcdoc 属性（http://w3schools.com/html5/tryit.asp?filename=tryhtml5_iframe_srcdoc在 chrome 和 android 浏览器中产生不同的结果）。
So the question is: Is there any alternative to the iframe srcdoc which will preserve all style of the received content and contain it in a div?
所以问题是：iframe srcdoc 是否有任何替代方案可以保留接收到的内容的所有样式并将其包含在 div 中？
采纳答案by Sindre
As suggested by eicto by comment, jquery could be used to fill an iframe at the ready-event. In order to adjust the height of the iframe to the height of the content some dirty hacks had to be applied, but the code I ended up using is more or less:
正如 eicto 通过评论所建议的那样，jquery 可用于在就绪事件中填充 iframe。为了将 iframe 的高度调整为内容的高度，必须应用一些肮脏的技巧，但我最终使用的代码或多或少是：
HTML
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
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);
});
回答by Chris Lundie
You can write to the document of an iframe like this:
您可以像这样写入 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();
回答by CerebralDatabank
Use the new Data URI Scheme. Example:
使用新的数据 URI 方案。例子：
var content = "<html></html>";
document.getElementById("my_iframe_id").src = "data:text/html;charset=UTF-8," + content;