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

参考文档: https://wxnacy.com/2018/01/30/iframe-load-html-code/

比如我想加载一段代码

<html><body>foo</body></html>

data url

第一种可以使用 data url 格式，将 html 做 urlencode 编码处理后，作如下操作

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

这个方法在大部分浏览器中都可以使用

<iframe src="javascript: '<html><body>Hello, <b>world</b>.</body></html>'"></iframe>

srcdoc

在 html5 中有一个新属性 srcdoc，它可以直接载入 html 代码

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

TypeScript 示例

代码:

<template>
  <iframe ref="ElRef" frameborder="0" style="width: 100%; height: 100%;" loading="lazy"></iframe> 
</template>

<script lang="ts">
import { defineComponent,onMounted,ref } from 'vue'

export default defineComponent({
  setup () {
    const ElRef = ref<HTMLIFrameElement>()

    onMounted(()=>{
      const iframeDoc = ElRef.value?.contentDocument
      if(iframeDoc) {
        iframeDoc.body.innerHTML = "<h1>Test</h1>"
      }
  
    })

    return {
      ElRef,
    }
  }
})
</script>

<style scoped>

</style>