iframe 直接加载 html 代码的几种方法

2018-01-30

iframe 除了加载普通 html 地址外，还有很多方式可以加载一段 html 代码

data url
使用 js
js 脚本
srcdoc
参考

比如我想加载一段代码

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 动态加载

<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>

参考

最近热读

Go 判断数组中是否包含某个 item

Vim 高级功能 vimgrep 全局搜索文件

办理北京工作居住证的一些细节

Go 语法错误：Non-declaration statement outside function body

Mac 电脑查看字体文件位置

扫码关注公众号，或搜索公众号“温欣爸比” 及时获取我的最新文章