原生iframe 父子页面通讯

简介: 原生iframe 父子页面通讯

html

复制代码 1.父页面向子页面传递值 let kiwiIframe = document.querySelector("#kiwiIframe"); kiwiIframe.contentWindow.postMessage("support_ok", "*"); 复制代码 2.子页面接受值 window.addEventListener("message", function () { // console.log(event.data); switch (event.data) { case "support_ok": console.log('????') break; } }); 复制代码 3.子页面再向父页面传递值 window.parent.postMessage("support", "*"); 复制代码 4.父页面再次接受值 window.addEventListener("message", function (event) { // console.log(event); switch (event.data) { case "support": console.log('?????') break; } }); 复制代码 作者: Bill 本文地址: http://biaoblog.cn/info?id=1645426309155 版权声明: 本文为原创文章,版权归 biaoblog 个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!
相关文章
|
16天前
|
前端开发 JavaScript
用iframe的方式实现微前端
微前端是最近几年火起来的概念,iframe是早期实现微前端的理想方案,而现在有了其它的方案,比如qianduan框架,single-spa,以及webpack5带来的联邦模块方案。但是每一个方案都有其优缺点,感兴趣的可以去实践一下。
|
4月前
|
JavaScript 前端开发 开发者
Vue的事件处理机制提供了灵活且强大的方式来响应用户的操作和组件间的通信
【5月更文挑战第16天】Vue事件处理包括v-on(@)指令用于绑定事件监听器,如示例中的按钮点击事件。事件修饰符如.stop和.prevent简化逻辑,如阻止表单默认提交。自定义事件允许组件间通信,子组件通过$emit触发事件,父组件用v-on监听并响应。理解这些机制有助于掌握Vue应用的事件控制。
47 4
|
4月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
|
4月前
|
存储 JavaScript 安全
js中多个页面之间如何进行通信?有什么区别?
js中多个页面之间如何进行通信?有什么区别?
70 0
|
10月前
|
存储 API UED
uniapp跨页面传递数据的几种方式
uniapp跨页面传递数据的几种方式
644 0
|
11月前
|
前端开发 JavaScript 安全
带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(1)
带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(1)
115 0
|
11月前
|
存储 前端开发 JavaScript
带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(2)
带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(2)
|
11月前
|
前端开发 JavaScript 安全
带你读《现代Javascript高级教程》——前端跨页面通信:实现页面间的数据传递与交互(1)
带你读《现代Javascript高级教程》——前端跨页面通信:实现页面间的数据传递与交互
178 0
|
小程序
微信小程序-父子组件通信
微信小程序可有意思了
241 0