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

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

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

---

【子页面】

// 子组件 (假设这是在iframe中的Vue应用)
new Vue({el: '#app',methods: {sendMessageToParent(url) {// 向父页面发送消息，包括目标URLwindow.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助手-通义千问