vue3 监听iframe 地址选址组件 message事件 获取选择的地址

Vue3 中监听 iframe 的 `message` 事件获取选中的地址通常是在处理跨域通信时的做法，因为浏览器出于安全原因默认阻止了同源策略下的父子窗口之间直接通信。如果你有一个嵌套在一个页面里的 iframe，你想通过这个 iframe 发起的请求得到结果并更新父组件的状态，你可以这样做：

1. 首先，在 iframe 中，你需要设置允许跨域发送消息的机制，例如在 HTML 或 JavaScript 中添加 `<meta>` 标签：

<iframe id="childFrame" :src="srcUrl" allow-same-origin></iframe>

2. 在 iframe 的 JavaScript 里，当地址选择完成后，你可以使用 `window.postMessage` 发送消息到父窗口，传递选中的地址：

// 假设有个选择地址的函数 selectAddress()
const parentWindow = window.parent;
parentWindow.postMessage({ type: 'addressSelected', data: selectedAddress }, '*');

这里假设`type`是你约定的消息类型，`selectedAddress`是要传递的地址。

3. 然后在 Vue3 组件上监听来自 iframe 的消息，可以在 mounted 生命周期钩子中使用 `window.addEventListener`：

mounted() {
  window.addEventListener('message', (event) => {
    if (event.origin !== 'http://your-iframe-domain.com') return; // 检查是否来自预期的域名
    const { type, data } = event.data;
    if (type === 'addressSelected') {
      this.selectedAddress = data; // 更新组件状态
    }
  });
}

4. 最后，记得在 `beforeDestroy` 或者 `unmounted` 生命周期中移除监听，以防止内存泄漏。