1.（前端小技术）iframe通讯（postMessage）

最新推荐文章于 2024-10-04 00:46:18 发布
最新推荐文章于 2024-10-04 00:46:18 发布
阅读量179 收藏 2
点赞数 2
分类专栏： 前端技术社区 文章标签： 前端 javascript iframe通讯 postMessage js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60387551/article/details/128019234
版权
前端技术社区 专栏收录该内容
42 篇文章 1 订阅 ¥49.90 ¥99.00
订阅专栏
本文探讨了在前端开发中如何使用postMessage进行iframe间的通信，包括父页面parent.html与子页面child.html的交互，以及实现通信的效果展示。
摘要由CSDN通过智能技术生成
了解本专栏 订阅专栏 解锁全文
GIS之家家长
关注
专栏目录
订阅专栏
1.（前端技术篇js）iframe通讯（postMessage）
地图之家
06-21 298
解决问题：用iframe嵌套页面如何进行通讯？ 效果图如下 发送信息的页面示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Historic Topographic Maps</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-s
关于Vue中使用iframe并进行数据通信
Litt_White的博客
08-28 2400
记录一下关于在vue中嵌套多个iframe时，如何进行vue文件和iframe的数据通信，并通过src实现动态切换不同的iframe。包括iframe使用的一些坑，例如iframe.onload不生效，iframe出现2次监听事件等问题的解决...
iframe跨域消息通信(postMessage和message事件)
黄彪博客
01-16 1万+
文章目录文章参考知识点例子说明能不能使用非message事件？ 文章参考 IFrame消息传递 使用 iframe + postMessage 实现跨域通信 知识点 页面需要监听 message 事件，window.addEventListener(“message”, dealMessage, false); 父页面向子iframe页面发送消息： document.getElementById("mapIframe").contentWindow.postMessage("父页面向子页面
Web前端iframe使用以及页面通信postmessage
weixin_42845571的博客
06-29 5136
iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了 <iframe src="demo_iframe_sandbox.htm"></iframe> iframe常用属性: 1.frameborder:是否显示边框，1(yes),0(no) 2.height:框架作为一个普通元素的高度，建议在使用css设置。 3.width:框架作为一个普通元素的宽度，建议使用css设置。 4.name:框架的名称，window.frames[nam
通过postMessage完成窗口页面和iframe之间通信
Z__XY_的博客
04-19 622
通过postMessage完成窗口页面和iframe之间通信 最近在做项目的时候，遇到这样一个需求： 在主项目中点击文件，然后进行在线文件编辑。由于主项目的框架是vue而编辑器是react，所以采取iframe的方式进行嵌入到页面。相当于在主项目页面中添加一个开关用于控制关闭iframe，在编辑器完成后，通过点击开关，然后主页面通知iframe保存数据，数据成功保存后再通知主页面关闭iframe。 一下是主页面的vue代码： //监听和取消监听message事件，回调是关闭iframe的方法 mount
iframe 通信（postMessage）
热门推荐
萧萧的博客
05-11 2万+
最近小编的公司在开发ERP系统，为了节约时间，有几个系统需要内嵌（iframe），但是有个需求，在一个内嵌项目中，需要重新打开另一个项目，每一个项目都是内嵌的iframe，因此让小编愁了好一会，后面选择了postMessage方式来实现的通信。 postMessage Api，有兴趣可以自行查看。 实现过程就是 1:在内嵌项目中使用top.postMessage('传...
前端技巧——iframe + postMessage进行页面通信
m0_72678953的博客
08-24 432
我们需要实现父页面对子页面发送消息与接收消息子页面对父页面发送消息与接收消息这四个功能完成之后随便怎么嵌入都没问题父页面对子页面发送消息我们首先在父项目定义一个iframe标签，书写好html后面我们参考postMessage的文档，可以知道，他需要一个窗口对象才能使用，恰巧我们的iframe提供了contentWindow属性来获取这样一个对象，又为了防止网络出现问题导致代码执行后子页面还没有出来，我们可以使用onload回调后在iframe设置等待子页面加载后执行// 发送消息给子页面。
vue使用 iframe + postMessage 实现通信
cxz
12-16 1871
1、在本地起两个工程 方便我们测试 父：http://172.16.150.72:8080 this.$refs.iframe.contentWindow.postMessage(‘消息’,目标src) 子：http://172.16.150.72:8081 window.addEventListener(‘message’,(e)=>{console.log(‘接收信息’)}) 2、父页面代码 <template> <div class="box"> &l
vue基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生
11-01
1、使用postMessage方法来完成基座项目和子项目之间的通讯 2、使用position: fixed解决iframe的弹窗及遮罩层问题 3、使用requestFullscreen()解决iframe里的全屏问题 4、使用history解决浏览器的后退问题 5、页面...
用postMessage实现两个html页面之间的通信（使用iframe嵌套的两个html页面）
kuer20124的博客
11-09 569
用postMessage实现两个html页面之间的通信（使用iframe嵌套的两个html页面）
Vue内嵌iframe及通讯
Pistachio839的博客
01-12 523
Vue内嵌iframe及通讯 消息交互方式 父向子传递消息：iframeEl.contentWindow.postMessage 子接收父消息：window.addEventListener(‘message’) 子向父传递消息：window.parent.postMessage 父接收子消息：window.addEventListener(‘message’) 链接：Vue内嵌iframe及通讯_大前端薯条铭的博客-CSDN博客_vue和iframe通信 链接：https://segment
window.postMessage()实现往iframe页面里面发送消息
CodingNoob
07-01 6428
window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。 通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。window.postMessage()提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）。 一般...
iframe及跨域通信postMessage()
招来红月的博客
05-03 3042
一、window.postMessage（） window.postMessage(info,origin)方法可以接受两个参数 1.info:要传递的数据，可以为json格式（因为我比较喜欢json格式的）部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化 2.origin：字符串参数，指明目标窗口的源，协议+主机+端...
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1039
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
Vue根实例、实例总结
最新发布
m0_54007573的博客
10-04 358
Vue根实例、实例总结
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 581
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
登录功能开发 P167重点
2303_81204446的博客
09-30 362
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1167
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
iframe的postmessage用法
08-23
使用postMessage方法可以实现跨域通信，它可以在不同的窗口或框架之间传递消息。要使用postMessage方法，需要指定消息内容和目标窗口的origin（消息发送方的源）。 在iframe中向上级窗口发送消息，可以使用以下代码： window.parent.postMessage("发送的消息内容", "目标窗口的origin"); 在上级窗口接收消息，可以通过添加一个事件监听器来处理消息： window.addEventListener("message", function(event) { // 处理接收到的消息 var message = event.data; // ... }); 在iframe中向指定的子级窗口发送消息，可以使用以下代码： window.frames['iframe名称'].postMessage("发送的消息内容", "目标窗口的origin"); 在子级窗口接收消息，可以通过添加一个事件监听器来处理消息： window.addEventListener("message", function(event) { // 处理接收到的消息 var message = event.data; // ... }); 请注意，由于安全原因，目标窗口的origin必须与消息发送方的origin匹配，否则消息会被浏览器阻止。 以上是使用postMessage方法进行父子窗口间或跨域通信的基本用法。具体的实现可能因具体情况而有所差异，请根据自己的需求进行调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [[前端] iframe及postMessage使用解析](https://blog.csdn.net/u010081689/article/details/48027537)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [iframe跨域通信传递数据笔记 postMessage](https://blog.csdn.net/kfepiza/article/details/121882173)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

GIS之家家长

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

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

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

打赏作者

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

抵扣说明：

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

余额充值