iframe内部子页面与外部主页面通讯

已于 2024-02-26 18:13:40 修改
阅读量757 收藏 9
点赞数 12
分类专栏： JavaScript 文章标签： iframe 前端 html
于 2023-11-24 00:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012804440/article/details/134574408
版权
本文探讨了如何解决iframe内部子页面与外部主页面进行通讯的问题。子页面通过设置传参触发通讯，而主页面通过监听事件来接收和处理子页面的响应。重点介绍了使用postMessage作为安全、跨域的通信方式，包括发送方如何调用postMessage方法发送消息，以及接收方如何通过message事件监听并处理来自其他窗口的数据。
摘要由CSDN通过智能技术生成

文章目录

一、问题

如上所示，红框内是内嵌iframe的网站。点击同意或拒绝后，需要通知iframe外的网站处理对应响应，这就是本篇文章需要解决的问题

二、解决

2.1、子页面

子页面发起通讯，可以设置传参，代码如下：

window.parent.postMessage({
   
    type: 'success',
    message: '成功'
最低0.47元/天 解锁文章
小马甲丫
关注
专栏目录
JS实现iframe中子父页面跨域通讯的方法分析
10-15
主要介绍了JS实现iframe中子父页面跨域通讯的方法,结合实例形式分析了JS实现iframe页面跨域通讯常见操作技巧与相关注意事项,需要的朋友可以参考下
iframe 通信的三种方式(重点介绍postMessage)
最新发布
weixin_46544600的博客
08-14 1634
- 父级html --> < button onclick = " postMessageBtn() " > postMessageBtn </ button > < iframe id = " myIframe " src = " http://172.30.10.18:8080/#/login " width = " 375 " height = " 700 " > </ iframe > < script > /**
Iframe 通信：一个vue项目中通过iframe嵌套另外一个vue项目，如何让这两个项目进行通信
虎康的博客
02-01 2593
当接收到来自父窗口的消息时，就会将消息打印输出到控制台中，并使用postMessage方法向父窗口发送了一条消息。需要注意的是，当使用postMessage方法发送消息时，第二个参数指定的是消息的目标窗口的origin，这里我们使用通配符*表示允许发送消息到任何域名，但在实际应用中建议设置具体的域名。然后，在父窗口中监听了message事件，当接收到来自iframe的消息时，就会将消息打印输出到控制台中。需要注意的是，由于涉及到跨域通信，需要确保两个项目的域名不同，否则会受到浏览器的同源策略限制。
iframe之间的通信
热门推荐
可乐加冰的博客
09-02 1万+
iframe父子页面间的传值与监听
iframe 页面间的通信(分享)
weixin_60547084的博客
01-10 4010
在许多老的项目中使用的都是 iframe 进行的页面嵌套，我这里写了三个页面进行演示红色的页面为最外层，本地开的服务，端口为 5500，而黄色和蓝色的页面分别为第二层和第三层，端口为 5501专门做的不是一个端口，后面会有作用。
iframe 实现跨域，两页面之间的通信
在路上`的博客
09-11 4990
iframe跨域时，iframe组件之间常用的通信，主要是H5的possmessage方法。一个项目为vue2，一个项目为vue3，两个不同的项目实现iframe嵌入，并实现通信。子页面-vue3， (端口号为127.0.0.1:8081)父页面-vue2（端口号为127.0.0.1:8080）
php main 与 iframe 相互通讯类(js+php同域/跨域)
10-19
但是，有时候我们仍然需要实现跨域通讯，比如在iframe嵌入外部页面时，主页面需要与iframe进行交互操作。本文将详细介绍如何使用JavaScript和PHP技术实现iframe和主页面之间的通讯，以及如何支持跨域的情况。 知识...
支付宝小程序中嵌入H5页面并且实现通信
m0_59708977的博客
03-17 8556
场景：在小程序开发中（无论是支付宝、微信、Uniapp等）经常会遇到在小程序中使用或者跳转一些自己的公司开发过的，或三方地址，在小程序中的开发文档中大家可以看到，知识有一些基本的内部跳转方式，但通过仅有的跳转方式无法满足我们的跳转外部页面的需求，这个时候我们就可以使使用webView <view class="page"> <web-view src="https://render.alipay.com/p/s/web-view/index" onMessage="onmessag
【前端知识梳理】HTML篇 笔记整理（一）
超逸の学习技术博客
03-28 1595
写在开头 大家好，这里是lionLoveVue，基础知识决定了编程思维，学如逆水行舟，不进则退。金三银四，为了面试也还在慢慢积累知识，Github上面可以直接查看所有前端知识点梳理，github传送门，觉得不错，点个Star★，持续更新中。另外，也可以关注微信公众号：小狮子前端Vue，源码以及资料今后都会放在里面。 一直想着成为一个up主，正值时间挺多的，4月份左右面试的面经我会制作视频去分...
前端基础（三十八）：iframe通信、浏览器跨窗口通信
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
01-22 1153
iframe通信、浏览器跨窗口通信
html里面iframe实现跨域与主页面通信
qqRZL的博客
06-09 1036
);在主页面上，可以使用来监听来自不同源的页面发送的消息。当监听到消息时，可以在回调函数中处理消息内容event.data。需要在主页面的监听函数中检查来源地址是否正确，这样防止页面被恶意注入代码，保障安全性。注意：在使用方法传递数据时，数据可以是任何 JS 支持的数据类型，包括字符串、数字、布尔值、对象、数组等，但不支持函数或 DOM 节点对象等引用类型。传递引用类型的数据可以先使用方法序列化为字符串，然后在接收端使用方法进行反序列化。以上就是基于方法实现跨域通信的基本流程。
iframe之间的通信方式
weixin_45392204的博客
08-16 4118
iframe标签可以实现html主页面嵌套html子页面，那么父子页面间的传值有以下两种方式。
iframe中怎么实现父子窗口通信
zoukunyang的博客
05-14 758
在业务开发中，经常有需要某个页面嵌入iframe，同时还需要与iframe进行通信。
4种通过iframe跨域与其他页面通信的方式
嘿嘿
03-17 4046
4种通过iframe跨域与其他页面通信的方式 不同域下的iframe不能进行操作。 1、location.hash： 在url中，http://www.baidu.com#helloword的#helloworad就是location.hash，改变hash值不会导致页面刷新，所以可以利用hash值来进行数据的传递，当然数据量是有限的。 假设localhost:8080下有文件cs1.html要和localhost:8081下的cs2.html传递消息，cs1.html首先创建一个隐藏的iframe，
实现ifream内外互相交互功能（vue2以及vue3写法）
Destinynever的博客
12-27 2070
【代码】实现ifream内外互相交互功能（vue2以及vue3写法）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小马甲丫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值