vue iframe跨域名通信

### Vue 中实现 iframe 跨域通信的方法 在 Vue 项目中，`window.postMessage` 是一种常见的用于解决 iframe 跨域通信的技术。以下是基于 `postMessage` 的具体实现方式。 #### 基本原理 通过 `window.postMessage` 方法可以在不同窗口之间安全地传输数据。调用此方法时，会触发目标窗口上的 `message` 事件，从而允许两个独立的上下文交换信息[^1]。 --- #### 实现步骤详解 ##### 1. 主页面 (Parent Page) 向子 iframe 发送消息 主页面可以通过获取到的 iframe 对象来发送消息给嵌入的子页面： ```javascript // 获取 iframe DOM 元素 const iframe = document.getElementById('myIframe'); // 使用 postMessage 向 iframe 子页面发送消息 iframe.contentWindow.postMessage({ key: 'value' }, '*'); // '*' 表示不限制目标源，实际开发建议指定具体的 URL 或域名 ``` 上述代码中的 `{ key: 'value' }` 即为主页面要传递的数据结构，而第二个参数表示接收方所在的地址或域名[^2]。 --- ##### 2. 子页面监听父页面的消息 在子页面中需要注册一个全局事件处理器用来捕获来自外部传来的信息： ```javascript window.addEventListener('message', function(event) { console.log('接收到父级发来的消息:', event.data); // 验证消息来源的安全性非常重要 if (event.origin !== 'https://example.com') return; // 处理逻辑... }); ``` 这里需要注意的是，在生产环境中应当严格校验 `event.origin` 属性以防止恶意攻击者伪造请求[^3]。 --- ##### 3. 子页面返回响应至主页面 同样地，当子页面完成某些操作之后也可以主动通知其上级容器： ```javascript parent.window.postMessage({ status: true }, 'http://main-domain.com'); ``` 这里的 `parent.window` 可能依据实际情况有所变化；如果是顶层框架，则可以直接写成 `top.window`. --- #### 完整案例演示 假设我们有一个简单的场景——Vue 应用加载了一个远程地图服务作为 iframe 并尝试与其交互。 ###### Parent Component Code Example: ```html <template> <div id="app"> <h1>这是我的应用</h1> <iframe ref="mapFrame" src="https://child.example.com/map.html"></iframe> <button @click="sendMessage">发送坐标查询命令</button> </div> </template> <script> export default { methods: { sendMessage() { const frameElm = this.$refs.mapFrame; // 如果支持 contentWindow 则继续执行下一步骤 if (!frameElm || !frameElm.contentWindow) return; try { let payload = JSON.stringify({ actionType: "GET_POSITION", userId: 7890, }); frameElm.contentWindow.postMessage(payload, "*"); } catch(err){ alert(`无法向 iframe 发送消息 ${err.message}`); } }, }, mounted(){ window.addEventListener('message', evt => { console.debug("从子帧获得反馈:",evt); }); } }; </script> ``` ###### Child Frame Handling Logic: ```javascript document.onload=function (){ window.onmessage=(e)=>{ var msg=JSON.parse(e.data); switch(msg.actionType){ case "GET_POSITION": e.source.postMessage({"latitude":45,"longitude":-73},"*"); break; default: throw new Error("未知的操作类型！"); } }; }; ``` --- ### 注意事项 - **安全性验证**: 总是在处理前确认 `origin` 是否合法。 - **兼容性考虑**: 尽管现代浏览器普遍支持该 API ，但仍需测试旧版 IE 下的行为差异。 - **性能优化**: 不要在高频次循环里频繁调用 `postMessage()` 函数以免造成不必要的开销。