通过iframe在线运行HTML代码的三种方式

在线编辑运行HTML代码很常见，一般是通过 <iframe> 形式，利用其沙箱隔离特性。

那么要如何通过 <iframe> 运行HTML代码呢，本文介绍三种方式。

1. 通过 document.write 将 HTML 代码写入文档中

这是最常用的方式，因为是同源的，可以直接 iframe.contentDocument.write 写到 iframe 内的文档中。

<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 内容。

<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 应用中引用文件的内容。

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

完整代码

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

效果截图