使用vue iframe嵌套html页面

### Vue 中使用 iframe 嵌入 HTML 页面

在 Vue 项目中嵌入 HTML 页面可以通过 `<iframe>` 标签实现。为了更好地管理和控制 iframe 的行为，可以利用 Vue 组件化的优势来封装 iframe。

#### 创建一个简单的 iframe 组件

创建一个新的组件 `IframeComponent.vue`：

<template>
  <div class="iframe-container">
    <iframe :src="url" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  props: ['url'],
};
</script>

<style scoped>
.iframe-container {
  width: 100%;
  height: 600px;
}

iframe {
  width: 100%;
  height: 100%;
}
</style>

这个组件接收一个 URL 属性并将其设置为 iframe 的源地址[^1]。

#### 在父组件中使用 IframeComponent

假设有一个名为 `ParentComponent.vue` 的父组件，在其中引入并注册 `IframeComponent`:

<template>
  <div>
    <button @click="loadPage">加载页面</button>
    <IframeComponent v-if="showIframe" :url="pageUrl"/>
  </div>
</template>

<script>
import IframeComponent from './components/IframeComponent';

export default {
  components: { IframeComponent },
  data() {
    return {
      showIframe: false,
      pageUrl: ''
    };
  },
  methods: {
    loadPage() {
      this.pageUrl = 'https://example.com';
      this.showIframe = true;
    }
  }
};
</script>

这里定义了一个按钮用于触发 iframe 加载指定的 URL 地址，并通过条件渲染的方式显示/隐藏 iframe[^3]。

#### 跨域通信与交互

当涉及到跨域场景下父子页面之间的调用时，则需遵循浏览器的安全策略——同源政策(SOP)，即只有协议、域名和端口都相同的情况下才允许直接访问对方的内容窗口对象(window)；对于不同源的情况则可通过 postMessage API 实现安全的数据交换[^2]。

例如，在子页面内发送消息给父级 Vue 应用程序：

// 子页面中的 JavaScript 代码
window.parent.postMessage('来自 iFrame 的问候', '*');

而在父页面监听这些消息：

mounted() {
  window.addEventListener('message', function(event) {
    console.log(`收到的消息：${event.data}`);
  });
},
beforeDestroy() {
  window.removeEventListener('message', /* ... */);
}

这样就可以实现在不同的上下文中互相传递数据而不违反安全性原则。