vue iframe父子页面通信postmessage

### 使用 PostMessage 实现在 Vue 中的 Iframe 父子页面通信 #### 父页面设置与配置为了使父页面可以向嵌入的子页面发送消息，在父页面中需要先获取到 iframe 的 DOM 对象，并调用其 `contentWindow.postMessage` 方法来传递数据给子页面。 ```html  <template> <div id="app"> <iframe ref="myFrame" src="http://localhost:8081/" width="600" height="400"></iframe> <button @click="sendDataToChild">Send Data to Child</button> </div> </template> <script> export default { name: "App", mounted() { this.$refs.myFrame.onload = () => console.log("iFrame loaded"); }, methods: { sendDataToChild() { const data = { message: "Hello from parent!" }; let frameElement = this.$refs.myFrame; frameElement.contentWindow.postMessage(data, "*"); // '*' 表示不限制目标源域名，实际使用时应指定具体地址[^3] } } }; </script> ``` 当点击按钮时会触发 `sendDataToChild()` 函数执行，该函数负责构建要传输的数据对象并通过 postMessage 发送给子页面。注意这里使用了通配符 "*" 来表示接收方不受限于特定来源；但在生产环境中建议明确指出预期的目标 URL 以提高安全性。 #### 子页面监听来自父级的消息在子页面里可以通过添加 event listener 监听由父页面发出的信息： ```javascript // 子页面 JavaScript 文件 window.addEventListener('message', function(event) { // 安全验证：确保信息确实来自于信任的父窗口 if (event.origin !== 'http://expected-parent-domain.com') return; alert(`Received ${JSON.stringify(event.data)} from parent`); }, false); ``` 这段脚本会在接收到新消息时弹出提示框显示所收到来自父页面的内容。同样重要的是要注意安全性的考量——即只处理那些已知可信源头发来的请求。 #### 反向操作：子页面向父页面发送通知如果希望从子页面主动发起交流，则可以在子页面内部定义相应的方法用于构造并发射消息回传至父页面。 ```html  <button onclick="notifyParent()">Notify Parent Page</button> <script type="text/javascript"> function notifyParent(){ window.parent.postMessage({ action:"childNotification", content:"This is a notification from the child" },'*'); } </script> ``` 而在对应的父页面上则需注册相应的处理器等待这些反馈的到来: ```javascript // 在 Parent.vue 组件内的 created 生命周期钩子里加入下面这行代码 created(){ window.addEventListener('message',(e)=>{ console.log(e.data); // 处理来自子页面的通知 }); } ``` 以上就是完整的双向交互流程说明以及具体的实现方式[^4]。

阅读全文

vue iframe父子页面通信postmessage

相关推荐

jsp项目中使用vue搭建页面，使用iframe引入，父子页面传值

父子页面相互调用总结

javascript父子页面传参

Iframe交互：父子窗体与Sturts2的页面跳转通信

Vue嵌套iframe页面：提升SEO与用户体验的终极策略

Vue嵌套iframe页面：调试、测试与兼容性问题的全面解答

使用vue iframe嵌套html页面

vue使用iframe嵌套页面携带token

vue嵌入iframe本系统其他vue页面

vue postMessage的使用场景

iframe挂在vue页面

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

vue 中如何预加载 iframe 页面，保证 iframe 页面能收到父组件传过来的数据

vue页面嵌套url iframe跨域怎么解决

vue3中iframe嵌入第三方页面

vue3iframe跨域传值

vue 嵌套iframe高度自适应

vue中iframe跨域访问能否直接解决

vue中使用iframe参数设置

大家在看

复盛压缩机选型软件.rar )

多模态生理数据预测状态-飞行员

cubase 5 机架 好用方便的机架文件，内含效果器插件

ISO 6469-3-2021 电动道路车辆 - 安全规范 - 第 3 部分：电气安全.docx

中国检查徽章背景的检察机关PPT模板

最新推荐

中小学校网络视频监控解决方案.doc

cc65 Windows完整版发布：6502 C开发工具

【CLIP模型实战】：从数据预处理到代码实现的图文相似度计算完全指南

车载以太网doip协议格式

JavaScript中文帮助手册：初学者实用指南

深入理解MySQL存储引擎：InnoDB与MyISAM的终极对决

window中系统中断，cpu占用100%

C++Builder6.0缺失帮助文件的解决方案

【湖北专升本MySQL强化训练】：5大SQL语句编写技巧，迅速提升实战能力

HFSS如何设置网格化细化

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

cubase 5 机架好用方便的机架文件，内含效果器插件