当前位置：首页 > article >正文

vue iframe进行父子页面通信并切换URL

article 2025/1/17 3:13:55

使用通义千问提问后得到一个很好的示例。

需求是2个项目需要使用同一个面包屑进行跳转，其中一个是iframe所在的项目，另一个需要通过地址访问。通过 window.parent.postMessage ，帮助 <iframe> 内嵌入的子页面和其父页面之间进行跨域通信。

【子页面】

// 子组件 (假设这是在iframe中的Vue应用)
new Vue({
  el: '#app',
  methods: {
    sendMessageToParent(url) {
      // 向父页面发送消息，包括目标URL
      window.parent.postMessage({ action: 'changeIframeSrc', url }, '*');
    }
  },
  template: `
    <button @click="sendMessageToParent('https://example.com/new-content')">
      Load New Content
    </button>
  `
});

【父页面】

<!-- 父页面 HTML -->
<div id="app">
  <iframe ref="myIframe" :src="currentUrl" width="600" height="400"></iframe>
</div>

// 父页面 Vue 实例
new Vue({
  el: '#app',
  data() {
    return {
      currentUrl: 'https://example.com/initial-content' // 初始URL
    };
  },
  mounted() {
    // 监听来自子组件的消息
    window.addEventListener('message', this.handleMessage);
  },
  beforeDestroy() {
    // 移除事件监听器以防止内存泄漏
    window.removeEventListener('message', this.handleMessage);
  },
  methods: {
    handleMessage(event) {
      const { data } = event;

      // 安全检查：验证消息来源和预期动作
      if (data.action === 'changeIframeSrc' && typeof data.url === 'string') {
        // 更新 iframe 的 src 属性
        this.currentUrl = data.url;
      }
    }
  }
});

请注意，在实际应用中，你不应该使用 '*' 作为 postMessage 的目标源参数，因为它允许消息被发送到任何域，这可能会导致安全问题。你应该指定一个明确的源，如 'https://your-iframe-domain.com'，以便只接受来自特定域的消息。同样地，在父页面接收消息时，你也应该检查 event.origin 来确保消息确实来自预期的域。

【资料参考】

通义tongyi.ai_你的全能AI助手-通义千问

查看全文

http://www.kler.cn/a/442516.html