在线编辑运行HTML代码很常见，一般是通过 <iframe> 形式，利用其沙箱隔离特性。
那么要如何通过 <iframe> 运行HTML代码呢，本文介绍三种方式。
1. 通过 document.write 将 HTML 代码写入文档中
这是最常用的方式，因为是同源的，可以直接 iframe.contentDocument.write 写到 iframe 内的文档中。
html
<textarea rows="10" onchange="render()"><h1>123</h1></textarea>
<iframe id="write"></iframe>
<script>
function render() {
const code = document.querySelector('textarea').value
// write
const writeIfr = document.getElementById('write')
writeIfr.contentDocument.open()
writeIfr.contentDocument.write(code)
writeIfr.contentDocument.close()
}
render()
</script>2. 通过 <iframe> 的 srcdoc 属性直接内联 HTML 代码
srcdoc 属性是 HTML5 中的新属性。
srcdoc 属性规定要显示在内联框架中的页面的 HTML 内容。
html
<textarea rows="10" onchange="render()"><h1>123</h1></textarea>
<iframe id="srcdoc" srcdoc=""></iframe>
<script>
function render() {
const code = document.querySelector('textarea').value
// srcdoc
const srcdocIfr = document.getElementById('srcdoc')
srcdocIfr.srcdoc = code
}
render()
</script>3. 通过将 HTML 代码创建一个 Blob 对象并转为 blob: URL 赋值给 <iframe> 的 src 属性
URL.createObjectURL 用于创建一个代表文件（File）或二进制大对象（Blob）的 URL，这些 URL 可以用于在 Web 应用中引用文件的内容。
html
<textarea rows="10" onchange="render()"><h1>123</h1></textarea>
<iframe id="blob" src=""></iframe>
<script>
function render() {
const code = document.querySelector('textarea').value
// blob
const blobIfr = document.getElementById('blob')
const blob = new Blob([code], { type: 'text/html' })
blobIfr.src = window.URL.createObjectURL(blob)
}
render()
</script>完整代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 1rem;
}
textarea {
width: 100%;
}
iframe {
width: 33.33%;
height: 500px;
float: left;
}
</style>
</head>
<body>
<textarea rows="10" onchange="render()"><h1>123</h1></textarea>
<iframe id="write"></iframe>
<iframe id="srcdoc" srcdoc=""></iframe>
<iframe id="blob" src=""></iframe>
<script>
function render() {
const code = document.querySelector('textarea').value
// write
const writeIfr = document.getElementById('write')
writeIfr.contentDocument.open()
writeIfr.contentDocument.write(code)
writeIfr.contentDocument.close()
// srcdoc
const srcdocIfr = document.getElementById('srcdoc')
srcdocIfr.srcdoc = code
// blob
const blobIfr = document.getElementById('blob')
const blob = new Blob([code], { type: 'text/html' })
blobIfr.src = window.URL.createObjectURL(blob)
}
render()
</script>
</body>
</html>效果截图