Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >原生iframe 父子页面通讯

原生iframe 父子页面通讯

作者头像
biaoblog.cn 个人博客
发布于 2022-08-11 11:54:53
发布于 2022-08-11 11:54:53
72800
代码可运行
举报
运行总次数:0
代码可运行

html

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<iframe id="kiwiIframe" v-if="showPickForm" src="${chrome.runtime.getURL("iframes/notSupport.html")}">

1.父页面向子页面传递值

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
          let kiwiIframe = document.querySelector("#kiwiIframe");
          kiwiIframe.contentWindow.postMessage("support_ok", "*");

2.子页面接受值

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    window.addEventListener("message", function () {
      // console.log(event.data);
      switch (event.data) {
        case "support_ok":
                   console.log('????')
          break;
      }
    });

3.子页面再向父页面传递值

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 window.parent.postMessage("support", "*");

4.父页面再次接受值

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
          window.addEventListener("message", function (event) {
            // console.log(event);
            switch (event.data) {
              case "support":
               console.log('?????')
                break;
            }
          });
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
深入理解 <iframe>的双向通信:从基础到实战
在现代 Web 开发中,<iframe> 是一个常用的 HTML 元素,用于在页面中嵌入另一个网页。然而,<iframe> 的嵌入页面与父页面之间的通信一直是一个复杂且容易出错的问题。本文将深入探讨 <iframe> 的双向通信机制,从基础概念到实战应用,帮助开发者彻底掌握这一技术。
Front_Yue
2025/03/12
2420
深入理解 <iframe>的双向通信:从基础到实战
前端爬坑日记之vue内嵌iframe并跨域通信
由于该项目是基于原本的安卓app,做的微信h5,所以原来的使用webview的页面现在需要在vue中实现,那就是使用iframe 查看了很多很多文档,其中这一篇是很有价值的 https://gist.github.com/pboji...点击预览
双面人
2020/04/03
8K0
vue父页面给iframe子页面传值
在vue父页面有两个个参数 名称和图标,需要把这两个参数传到iframe的地图里面,在地图触发绘点事件的时候,获取到传来的参数并且展示
王小婷
2023/08/11
1.6K0
vue父页面给iframe子页面传值
iframe怎么将参数传递给vue 父组件
在子页面的iframe中想将参数传递给Vue父组件,可以使用postMessage()方法将数据发送给父窗口。父组件可以通过监听message事件来接收并处理这些数据。
王小婷
2023/08/10
1.6K0
iframe关闭父页面(iframe嵌套https页面)
width iframe的高度 height iframe的宽度 src iframe里面加载的页面url name 可以通过window.frames[name]获取到frame scrolling iframe里面的页面是否可以滚动 frameborder 是否显示iframe边框 1(显示)0(不显示) id 和其他的html标签id一样 在主页面中通过iframe标签可以引入其他子页面
全栈程序员站长
2022/07/25
7K0
iframe 与 postMessage 方法
既是发消息,就有发送方与接收方,发送方要调用 postMessage 方法,接收方要注册 onmessage 事件处理函数,处理接收的消息。
挥刀北上
2023/06/20
8240
iframe 与 postMessage 方法
基于iframe,前端和前端联调也是很丝滑
页面监听hashchange事件,然后父页面改变哈希,子页面读取哈希来实现通信。但是这有一个问题,如果传递的信息过多,那就会导致url很长,而且维护起来也麻烦。更严重的问题是,如果页面本身有利用哈希的逻辑,将会无解
lhyt
2022/03/08
8020
详解使用postMessage解决iframe跨域通信问题
这周碰到一个让人头疼的需求:要在我的web项目中嵌入另一个第三方web项目。第一时间想到的就是用iframe了,但问题来了,我和第三方web项目是有交互的,这就违反同源策略了,处理跨域问题是最让人头疼的事之一。
用户1289394
2021/10/13
4.8K0
Web中的窗口通讯方式及使用(postMessage/MessageChannel/BroadcastChannel)
三种常用的跨窗口通信技术:postMessage、MessageChannel 和 BroadcastChannel。
码客说
2024/01/06
2K0
webRtc实践总结
场景 业务上有这样的一个场景,这是一个游戏直播会场,需要把手机上面的游戏画面,投屏到大屏幕上面,不仅如此可能还需要加一些其他信息例如比赛信息或者logo赞助等等,只使用设备本身投屏就不能满足现在的述求,说白了在大屏之上我们需要一个自定义的游戏视频画面。 image.png 技术抽象 业务是这样的类似场景,具体实践是使用electron的客户端实现:主窗口采集的视频,投放大屏窗口中。 核心代码功能解析 需要实现两个窗口实例 需要实现视频传输 解决方案 electron是支持获取屏幕实例的api的,并且在不同
吴文周
2022/03/09
1.1K0
webRtc实践总结
前端和前端联调的各种姿势,了解一下
背景:父页面index.html里面有一个iframe,iframe的src为子页面(另一个html的链接),下文都是基于此情况下进行
lhyt
2019/12/17
1.5K0
前端和前端联调的各种姿势,了解一下
那些年前端跨过的域
同源策略(same-origin policy) 最初是由 Netspace 公司在 1995 年引入浏览器的一种安全策略,现在所有的浏览器都遵守同源策略,它是浏览器安全的基石。
沃趣科技
2018/05/15
2K1
那些年前端跨过的域
postMessage详解
该方法是HTML5引入的API,可以通过异步方式实现跨源通信,多用于窗口间数据通信。它提供了一种受控机制来规避不同源脚本无法通信的限制,只要正确使用,这种方法很安全。
全栈程序员站长
2022/09/13
9030
postMessage详解
实用的VUE系列——每天在用的Vue-SFC-Playground你真的了解吗?
声明:本文为稀土掘金技术社区首发签约文章,30天内禁止转载,30天后未获授权禁止转载,侵权必究!
用户7413032
2024/03/23
1.7K0
实用的VUE系列——每天在用的Vue-SFC-Playground你真的了解吗?
不同页面通信与跨域0. 前言1. localstorage2. 玩转iframe3. 非同域的两个tab页面通信4.MessageChannel
相信跨域有什么手段,大家都背得滚瓜烂熟了。现在我们来做一些不在同一个tab页面或者跨域的实践。
lhyt
2018/10/31
4.5K0
vue项目iframe的传值问题
  所以。我把插件的使用封装了一个html页面。vue项目则利用iframe的方式引入。
Dawnzhang
2019/11/21
1.8K0
跨浏览器tab页的通信解决方案尝试
目标 当前页面需要与当前浏览器已打开的的某个tab页通信,完成某些交互。其中,与当前页面待通信的tab页可以是与当前页面同域(相同的协议、域名和端口),也可以是跨域的。 要实现这个特殊的功能,单单使用HTML5的相关特性是无法完成的,需要有更加巧妙的设计。 畅想 现在我们发现下思维,假设多种场景下的解决方案,最终寻找通用解。 case 1 两个需要交互的tab页面具有依赖关系。 如 A页面中通过JavaScript的window.open打开B页面,或者B页面通过iframe嵌入至A页面,此种情形最简
欲休
2018/03/15
2.3K0
如何利用postMessage窃取编辑用户的Cookie信息
某天,当我在做某个项目的漏洞测试时,在登录的一些HTTP请求记录中,我发现了一种利用postMessage方式窃取和编辑用户Cookie的方法。由于该测试是邀请测试,出于保密,我只能在下文中和大家分享一些方法思路。
FB客服
2019/05/09
1.7K0
如何利用postMessage窃取编辑用户的Cookie信息
前端进程间通讯的渗透之术
父页面和子页面(iframe)处于2个不同的进程(即使在同一个域),进程之间的通讯必须通过每个进程内【事件监听所在的线程】来完成。最重要的是,通讯时传输的数据格式必须是序列化的格式,序列化格式指【一维】【线性】的数据类型比如字符串、字节流等,在浏览器中有这么几种序列化格式可选:
Jean
2020/10/09
1.7K0
关于iframe跨域传输
至于我为什么想写这篇文章是因为最近在项目中使用到了iframe,是的。生无可恋的又写上了一点js,可能是因为前端的人对单点登录啥的或者是页面跳转以及要和后端的逻辑 处理起来不是很熟练吧。各大网站,包括淘宝,京东,这些大网站有很多自己的产品,至于前期是怎么样的不是很清楚,网易云至少是用的iframe。参考了一些博客,至于使用 不使用iframe,我觉得能解决问题就好,而且如果考虑的多的话就考虑以后扩展以及拆分啥的,毕竟前端又不像后端这样。
Michel_Rolle
2023/07/30
2.6K0
相关推荐
深入理解 <iframe>的双向通信:从基础到实战
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验