在 Vue3 中使用 ＜iframe＞，常见场景、问题及其解决方案

在 Vue3 中使用 <iframe> 是一种常见的跨文档内容集成方式，但也会带来一些特定的挑战。以下是常见场景、问题及其解决方案：

---

一、常见场景

1. 嵌入第三方内容

   • 例如：地图（Google Maps）、视频播放器（YouTube）、支付表单（Stripe）等。
   • 需要与第三方脚本隔离，避免样式或脚本冲突。

2. 隔离 CSS/JS 作用域

   • 当需要完全独立的样式或脚本环境时（如嵌入旧系统模块）。

3. 微前端架构

   • 通过 iframe 集成不同技术栈的子应用。

4. 沙箱化内容展示

   • 展示用户生成的 HTML 内容（如富文本编辑器预览），避免 XSS 攻击。

---

二、常见问题与解决方案

1. 父子通信问题

问题：Vue 组件与 iframe 内部页面需要双向通信（如传递数据、触发事件）。
解决方案：

• 使用 postMessage API
  父组件发送消息：

  <template>
    <iframe ref="iframeRef" @load="onIframeLoad"></iframe>
    <button @click="sendMessage">发送消息</button>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const iframeRef = ref(null);
  const message = { type: 'UPDATE_DATA', data: 'Hello from Vue' };
  
  const sendMessage = () => {
    iframeRef.value.contentWindow.postMessage(message, '*'); // 目标 origin 需明确
  };
  
  const onIframeLoad = () => {
    // 确保 iframe 加载完成后发送消息
    sendMessage();
  };
  </script>
  

  iframe 内部页面接收消息：

  window.addEventListener('message', (event) => {
       
    if (event.data.type === 'UPDATE_DATA') {
       
      console<