Html 代码作为 IFRAME 源而不是 URL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6102636/
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
Html code as IFRAME source rather than a URL
提问by Max
This standard code for an IFRAME, is there a way to replace the src URL with Just html code? so my problem is simple, I have a page it loads an HTML body from MYSQL I want to present that code in a frame so it renders it self independent of the rest of the page and in the confines of that specific bordering.
这个 IFRAME 的标准代码，有没有办法用 html 代码替换 src URL？所以我的问题很简单，我有一个页面，它从 MYSQL 加载一个 HTML 正文，我想在一个框架中显示该代码，以便它独立于页面的其余部分并在该特定边框的范围内呈现它自己。
<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe>
回答by lonesomeday
You can do this with a data URL. This includes the entire document in a single string of HTML. For example, the following HTML:
您可以使用数据 URL 执行此操作。这包括单个 HTML 字符串中的整个文档。例如，以下 HTML：
<html><body>foo</body></html>
can be encoded as this:
可以这样编码：
data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E
and then set as the srcattribute of the iframe. Example.
然后设置为srciframe的属性。 例子。
Edit: The other alternative is to do this with Javascript. This is almost certainly the technique I'd choose. You can't guarantee how long a data URL the browser will accept. The Javascript technique would look something like this:
编辑：另一种选择是使用 Javascript 来做到这一点。这几乎可以肯定是我会选择的技术。您无法保证浏览器会接受多久的数据 URL。Javascript 技术看起来像这样：
var iframe = document.getElementById('foo'),
iframedoc = iframe.contentDocument || iframe.contentWindow.document;
iframedoc.body.innerHTML = 'Hello world';
Edit 2 (December 2017): use the Html5's srcdocattribute, just like in Saurabh Chandra Patel's answer, who now should be the accepted answer! If you can detect IE/Edge efficiently, a tip is to use srcdoc-polyfilllibrary only for them and the "pure" srcdoc attribute in all non-IE/Edge browsers (check caniuse.comto be sure).
编辑 2（2017 年 12 月）：使用 Html5 的srcdoc属性，就像在Saurabh Chandra Patel的答案中一样，现在谁应该是公认的答案！如果您可以有效地检测 IE/Edge，一个提示是仅对它们使用srcdoc-polyfill库，并在所有非 IE/Edge 浏览器中使用“纯”srcdoc 属性（请查看caniuse.com以确保）。
<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
回答by Saurabh Chandra Patel
use html5 srcdoc-polyfill Docs
使用 html5 srcdoc-polyfill文档
<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
Browser support - Tested in the following browsers:
浏览器支持 - 在以下浏览器中测试：
Microsoft Internet Explorer
6, 7, 8, 9, 10, 11
Microsoft Edge
13, 14
Safari
4, 5.0, 5.1 ,6, 6.2, 7.1, 8, 9.1, 10
Google Chrome
14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24.0.1312.5 (beta), 25.0.1364.5 (dev), 55
Opera
11.1, 11.5, 11.6, 12.10, 12.11 (beta) , 42
Mozilla FireFox
3.0, 3.6, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 (beta), 50
回答by Andrew Swan
According to W3Schools, HTML 5 lets you do this using a new "srcdoc" attribute, but the browser support seems very limited.
根据 W3Schools 的说法，HTML 5 允许您使用新的“srcdoc”属性来执行此操作，但浏览器支持似乎非常有限。
