iframe 除了加载普通 html 地址外，还有很多方式可以加载一段 html 代码
比如我想加载一段代码
1 | <html><body>foo</body></html> |
data url
第一种可以使用 data url 格式，将 html 做 urlencode 编码处理后，作如下操作1
<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E" />
使用 js
另一种方式是利用 javascript 动态加载1
2
3
4
5
6<iframe id="foo" />
<script>
var iframe = document.getElementById('foo'),
iframedoc = iframe.contentDocument || iframe.contentWindow.document;
iframedoc.body.innerHTML = 'Hello world';
</script>
js 脚本
这个方法在大部分浏览器中都可以使用1
<iframe src="javascript: '<html><body>Hello, <b>world</b>.</body></html>'"></iframe>
srcdoc
在 html5 中有一个新属性 srcdoc，它可以直接载入 html 代码1
<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>