如何在iframe中显示原始HTML纯文本？Nuxt.js项目实现失效求解决方案

问题原因 #

你原本的写法没有对需要展示的HTML标签做实体转义，iframe的srcdoc属性会把传入的内容当做正常HTML文档解析，所以<、>这些字符会被识别为标签边界，触发元素渲染。这个问题和Nuxt本身的配置无关，是转义逻辑和写法的问题。

解决方法 #

方法1：手动转义HTML实体后传入srcdoc #

需要把要展示的代码中的特殊字符提前做转义映射：

• < 转义为 <
• > 转义为 >
• & 转义为 &
• " 转义为 "
• ' 转义为 '

转义后的原生写法示例：

<iframe srcdoc="<pre>&lt;b&gt;Hello World&lt;/b&gt;</pre>"></iframe>

在Nuxt中动态渲染时，建议用计算属性处理转义逻辑，避免模板硬写导致的多层转义冲突：

<template>
  <iframe :srcdoc="iframeContent" />
</template>

<script setup>
import { computed } from 'vue'

// 要展示的原始HTML代码
const rawCode = `<b>Hello World</b>`

// HTML转义函数
const escapeHtml = (str) => {
  return str.replace(/[&<>"']/g, (match) => {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }
    return escapeMap[match]
  })
}

const iframeContent = computed(() => `<pre>${escapeHtml(rawCode)}</pre>`)
</script>

方法2：使用Blob+纯文本类型（更简单，无需转义） #

直接把要展示的代码作为纯文本内容生成Blob，类型指定为text/plain，再生成临时URL传给iframe的src属性，完全避开转义坑：

<template>
  <iframe :src="iframeSrc" />
</template>

<script setup>
import { computed, onUnmounted } from 'vue'

// 要展示的原始HTML代码
const rawCode = `<b>Hello World</b>`

const iframeSrc = computed(() => {
  const blob = new Blob([rawCode], { type: 'text/plain' })
  return URL.createObjectURL(blob)
})

// 组件销毁时释放临时URL，避免内存泄漏
onUnmounted(() => {
  if (iframeSrc.value) {
    URL.revokeObjectURL(iframeSrc.value)
  }
})
</script>

内容的提问来源于stack exchange，提问作者Jean DuPont