Vue.js中高效更新使用srcdoc的iframe内DOM的优化方案

嘿，我完全懂你的困扰——当html这个大字符串每次因为一点点style-2的变化就整体更新时，整个iframe都要重新渲染一遍，确实会让应用变得卡顿，体验很糟。别担心，咱们换个思路，不用每次都动整个srcdoc，直接针对需要修改的部分操作就行，下面给你两个实用方案：

方案一：直接操作iframe的内部DOM（最省心高效） #

你可以通过Vue的ref获取到iframe元素，然后直接访问它的contentDocument来单独修改style-2对应的标签，这样只会更新需要改动的部分，不会触发整个iframe的重加载。

具体步骤：

1. 给iframe加个ref方便获取元素：

<template>
  <iframe ref="targetIframe" :srcdoc="html"></iframe>
</template>

2. 把style-2的内容单独做成响应式变量，然后在变量变化时，直接操作iframe内部的style标签：

<script setup>
import { ref, watch, onMounted } from 'vue'

// 初始的html内容，给style-2加个id方便定位
const html = ref(`<!doctype html>
<html>
<head>
  <style>style-1</style>
  <style id="style-2-container">style-2</style>
</head>
<body>
symbolic
</body>
</html>`)

// 单独存style-2的内容，只让这个变量响应式
const style2Content = ref('style-2')
const targetIframe = ref(null)

// 定义更新style-2的方法
const updateStyle2 = () => {
  if (!targetIframe.value) return
  const iframeDoc = targetIframe.value.contentDocument
  const style2Element = iframeDoc.getElementById('style-2-container')
  if (style2Element) {
    style2Element.textContent = style2Content.value
  }
}

// 监听style2Content的变化，自动触发更新
watch(style2Content, () => {
  updateStyle2()
})

// 页面挂载后，确保iframe加载完成再初始化一次
onMounted(() => {
  targetIframe.value.onload = () => {
    updateStyle2()
  }
})
</script>

这样一来，只有style2Content变化时，才会修改iframe里对应的style标签，整个html字符串完全不用动，也就不会有不必要的重渲染了，性能一下就上来了。

方案二：用postMessage通信（适合复杂场景） #

如果你的iframe内容逻辑比较复杂，或者不想直接操作DOM，也可以通过postMessage给iframe发消息，让iframe内部自己处理样式更新。

需要在iframe的初始html里加一段监听消息的脚本：

<script setup>
import { ref, watch } from 'vue'

const html = ref(`<!doctype html>
<html>
<head>
  <style>style-1</style>
  <style id="style-2-container">style-2</style>
  <script>
    // 监听来自父页面的消息
    window.addEventListener('message', (e) => {
      if (e.data.type === 'UPDATE_STYLE2') {
        const styleEl = document.getElementById('style-2-container')
        if (styleEl) styleEl.textContent = e.data.content
      }
    })
  </script>
</head>
<body>
symbolic
</body>
</html>`)

const style2Content = ref('style-2')
const targetIframe = ref(null)

// 变量变化时给iframe发消息
watch(style2Content, (newVal) => {
  if (targetIframe.value) {
    targetIframe.value.contentWindow.postMessage(
      { type: 'UPDATE_STYLE2', content: newVal },
      '*' // 如果知道iframe的源，替换成具体地址更安全
    )
  }
})
</script>

这个方案的好处是父组件和iframe代码解耦，但代码量会多一点，适合有复杂交互的场景。

小提醒 #

• 优先选方案一，直接操作DOM的开销最小，完全适配你的需求；
• 一定要给要修改的style标签加唯一id，这样能快速定位，不用遍历所有style标签；
• 初始的大html第一次加载可能还是会有点慢，但后续的样式更新就完全不会卡顿了。

备注：内容来源于stack exchange，提问作者hieunv