利用iframe 等实现两个窗口通信方法之－postMessage

最新推荐文章于 2024-08-14 09:30:44 发布
最新推荐文章于 2024-08-14 09:30:44 发布
阅读量1.9k 收藏 4
点赞数 1
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxj124/article/details/83898603
版权
本文探讨了如何使用HTML5的postMessage API解决跨文本档、多窗口和跨域的消息传递问题。通过postMessage方法，可以实现页面与新窗口、多窗口、iframe之间的数据通信，提供了一种安全有效的解决方案。文中详细介绍了postMessage的用法，包括传递数据的注意事项和接收消息的方法。
摘要由CSDN通过智能技术生成

两个窗口的通信问题应该是一个比较常见的问题了，通信可以通过很多种方式,如下：

localStorage 
postMessage 
websocket

 

平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题

1.页面和其打开的新窗口的数据传递

2.多窗口之间消息传递

3.页面与嵌套的iframe消息传递

4.上面三个问题的跨域数据传递

postMessage()

这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

 

postMessage(data,origin)方法接受两个参数

 1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。

2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果

最低0.47元/天 解锁文章
dxj124
关注
专栏目录
使用 iframe + postMessage 实现多级跨域通信（二）
qq_39355295的博客
10-15 1139
1、简介： 看过我前面写的跨域通信（一），那是我再开发中遇到问题时，自己上网学习，之前跨域通信时自己的知识盲点。在大量的大神案例的引导下，自己也开始明白了一点，于是便有了使用iframe+possMessags实现跨域通信（一） 2、要解决多级跨域通信问题： 但是。。。。我的问题并没有解决，因为我发现我的问题时多级跨域通信问题，于是又带着极大的好奇心，上网搜索，但是没有成功。 于是我通读javas...
嵌套iFrame使用postMessage相互传递消息（嵌套iFrame、跨父子窗口、跨页面）.zip
01-06
demo地址：http://www.tkcb.cc/menu/blog/html/html_0001/index.html 练习说明：使用postMessage可以在iFrame、父子窗口、跨页面等，之间相互传递消息。 你好，我是TKCB-GO，一个有着游戏策划梦想，却沦为程序员的游戏家，这是我的技术博客：www.tkcb.cc 技术博客网站里面，除了我的技术分享，还有我们乐队推荐的游戏、软件、电影、作品、超赞链接推荐等等。 最后，我会在CSDN陆续分享我的大量的（至少几百个）技术练习、经验等，希望大家多多交流，相互学习。
iframe通信postMessage
Mahuicool的博客
05-08 496
iframe嵌入页面是实现微前端的方式之一。由于浏览器的跨域限制，iframe与父页面之间的通信变得不是那么容易。postMessage解决了这个问题。从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.parent），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。
iframe 通信的三种方式(重点介绍postMessage)
最新发布
weixin_46544600的博客
08-14 1631
- 父级html --> < button onclick = " postMessageBtn() " > postMessageBtn </ button > < iframe id = " myIframe " src = " http://172.30.10.18:8080/#/login " width = " 375 " height = " 700 " > </ iframe > < script > /**
react iframe 使用contentWindow.postMessage 传递参数
github_38696818的博客
04-20 4418
A项目（react）使用iframe 嵌套B(react) 项目时候需要传递一个对象； private gettaskDetailIframeSrc = () => { const { currentGroup } = this.props; let origin = location.origin; let path = '/app/oa'; let search = `?${agent.setCurrentOrg(curren
iframe窗口跨域消息传送postMessage
橙子yq的代码世界
04-13 407
定义:postMessage() 方法用于安全地实现跨源通信。 看看菜鸟的介绍 <iframe style="width: 100%; height:100%" id="test" src="url" /> // 接收子窗口消息 window.addEventListener('message', this.Fn) Fn (e) { console.log(JSON.parse(e.data)) // 子窗口传来的消息 } // 发送消息到子窗口 this.ifr
实现两个窗口通信方法之postMessage
itKingOne的博客
07-18 2427
两个窗口的通信问题应该是一个比较常见的问题了，通信可以通过很多种方式,如下： localStorage  postMessage  websocket 今天博主先来一篇postMessage干货，后期还会给出websocket的实现代码。  首先来看一下基本的语法 otherWindow.postMessage(message, targetOrigin, [transfer]); ...
Vue进阶（九十二）：应用 postMessage 实现窗口通信_vue使用postmessage
2401_84447297的博客
04-29 774
，注意⚠️，是目标域不是本域！比如，你想在2.com的网页上往1.com网页上传消息，那么这个参数就是“http://1.com/”，而不是2.com.方法会返回一个窗口对象，使用这个对象可以向子窗口发送消息，而子窗口可以通过。在前端应用中，窗口间通信应用场景很多，比如弹出qq登录认证窗。参数，如字符串，数字，对象，数组，而不是和。如：http://g.cn:80/的时候，都不是本页面的。一样只局限于字符串。
HTML5中使用postMessage实现两个网页间传递数据
01-21
window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作...
利用HTML5的window.postMessage实现跨域通信
04-18
发送消息时，调用`postMessage`方法，传入两个参数：要传递的数据和接收数据的窗口的引用（通常是`window`对象的引用或`iframe`的`contentWindow`属性）。 接收窗口需要监听`message`事件来接收数据。当接收到消息...
前端学习（2075）：计算属性的基本使用
歌谣的博客
08-27 411
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&gt...
iframe嵌套页面 跨域_html5 postMessage解决跨域、跨窗口消息传递
weixin_39770165的博客
11-23 351
一些麻烦事儿平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题1.页面和其打开的新窗口的数据传递2.多窗口之间消息传递3.页面与嵌套的iframe消息传递4.上面三个问题的跨域数据传递postMessage()这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用...
window.postMessage()实现跨域消息传递
weixin_30319153的博客
05-15 1492
window.postMessage()方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https）， 端口号（443为https的默认值），以及主机 (两个页面的模数Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的...
iframe实现异步传输
t225com
09-25 131
使用iframe实现雷同Ajax的异步传输。 client.html &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;client.html&lt;/title&gt; &lt;script type=&qu
iframe的使用和 contentWindow、parent以及postMessage通信方式
weixin_50367873的博客
12-03 2851
问题： 如何进行消息通信（父发给子，子接收父的消息，也可父直接调用子的方法； 子发给父，父接收子的消息；） 如何找到指定的子或者父window（如果iframe层级过多），又如何在发送消息时不影响其他的message监听 一、iframe的使用 <iframe style={{border:0,width:"100%",height:630,}} src={src} /> 如何进行消息通信（父发给子，子接收父的消息； 子发给父，父接收子的消息） 方法一： 直接通过获取父或者子的
iframe跨域通信传递数据笔记 postMessage
kfepiza的博客
12-12 4027
文章目录前言一、iframe的window二、上级向iframe传值1.用 postMessage2.XX三、postMessage("发送的消息","域名*代表全部 ");1.postMessage是window下的方法2.语法从被传值目标的window对象调用postMessage(参数1,参数2,参3一般省略)参数1:messageData参数2:targetOrigin目标域名 , "*"代表所有参数3:是一个Transferable 对象 可无3. postMessage的特殊性, 可以跨越调用
vue中iframe的 postMessage message的使用,以及一些小疑问
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
07-04 2246
单点登录（跨域的情况），就可以利用iframe postMeaage于message进行通讯，将token存入其他网站的本地存储中，实现单点登录
在iframe内部通过window.open打开页面使用postMessage通信造成跨域问题解决办法
weixin_43777074的博客
01-13 2043
最近项目为了接入公司其他项目，使用了iframe，一般用到iframe，要通信我第一时间想到的就是postMessage，这次也不例外， 在iframe内部打开新页面并发送消息 const opener = window.open('xxx.com') 在xxx.com页面监听iframe内部发送消息，并回传消息给iframe //1.监听postMessage window.addEventListener('message', function (e) { // 处理消息 } }, f
postMessage解决iframe跨域通信
07-22
在 Web 开发中，当网页中包含来自不同域名的 iframe（内嵌框架）时，由于浏览器的同源策略限制，iframe 之间的直接通信会受到限制。为了实现 iframe 之间的跨域通信，可以使用 postMessage 方法。 postMessage 是一种 HTML5 提供的跨文档消息传递机制，它允许在不同窗口或 iframe 之间发送消息。通过 postMessage，可以在不同域名之间进行安全的双向通信。 使用 postMessage 进行跨域通信的步骤如下： 1. 在发送消息的页面（发送方）中，使用 JavaScript 调用 postMessage 方法发送消息。该方法接受两个参数：要发送的消息和接收消息的目标窗口的源（origin）。目标窗口的源可以是具体的域名、协议和端口号，或者是通配符 "*" 表示任意源。 ```javascript var targetWindow = document.getElementById('target-frame').contentWindow; targetWindow.postMessage('Hello', 'https://target-domain.com'); ``` 2. 在接收消息的页面（接收方）中，监听 message 事件，通过 event.data 获取接收到的消息。在事件处理程序中可以对消息进行处理。 ```javascript window.addEventListener('message', function(event) { if (event.origin === 'https://source-domain.com') { console.log('Received message: ' + event.data); } }); ``` 通过这种方式，发送方和接收方可以进行跨域通信，并且可以在消息中传递复杂的数据结构。但要注意，为了确保安全性，应该在接收方对来自不同源的消息进行验证，以防止恶意代码的攻击。 需要注意的是，postMessage 方法只能在现代浏览器中使用，兼容性可能会有所差异。此外，在使用 postMessage 进行跨域通信时，也需要确保目标窗口（接收方）支持 postMessage 方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值