window.postMessage跨域通信

xialong 发布于2019-08-23 11:35 / 1612人阅读

摘要：背景最近公司要求所有产品付款页面输入卡号密码信息的部分必须采用公司的统一页面。所以在通知付款时，我们采用了方法进行通信。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。该字符串为协议域名和端口号拼接而成。

背景

最近公司要求所有产品付款页面输入卡号密码信息的部分必须采用公司的统一页面。
具体实现方案是，我们将公司统一的输入卡号密码的页面通过iframe嵌入我们产品的付款页面。用户点击付款时，我们需要给iframe的页面发送消息，通知他们可以进行付款处理了。
我们产品页面与iframe内嵌的页面之间是不同域的页面。所以在通知iframe付款时，我们采用了window.postMessage方法进行通信。

window.postMessage方法介绍

假如我们的页面的window对象引用是windowParent，内嵌在iframe的页面的window对象引用是windowCard。
付款时，我们需要给他们发送数据：

windowCard.postMessage(message, targetOrigin, [transfer]);

message: 给目标页面发送的数据。格式可以是各种数据对象。目前我们发送的格式为JSON字符串。

targetOrigin: 通常是字符串"*"或者一个URI，指定允许哪些域能接收到消息。如果采用*，那么意味着允许把数据发送到任一个站点。所以，如果我们明确知道目标页面的域，那么将域的URL给这个参数是更为安全的做法。

transfer(可选): “是一串和message同时传递的Transferable对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权”。

我们在发送消息给目标页面之后，目标页面进行数据处理，处理完毕后会将处理结果返回给我们的页面。

他们同样用window.postMessage给我们发送处理结果。我们通过给我们页面的message事件增加event handler来接收处理结果。

windowParent.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
    var data = event.data;
    var origin = event.origin;
    var source = event.source;
}

如上所示，event的属性有:

data: 数据对象。目标页面会将她们的处理结果等等信息放在这里。

origin: postMessage发送方的origin。该字符串为协议、域名和端口号拼接而成。

source: postMessage发送方的window对象的引用。

样例代码(不可运行)

参考:
[1] https://developer.mozilla.org...

服务器托管云服务器跨域通信端跨域跨域 cdn跨域

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97183.html

iframe+postMessage实现跨域通信

摘要：前言需求背景最近开发管理系统，需要在本页面跳转到一个图片管理系统上传图片，上传成功后返回图片链接，然后返回管理系统，显示图片实现思路上传图片时，需要在本窗口跳转到图片管理系统，并且两个系统之间要通信考虑到两个系统是不同的端口号，存在跨域问题前言需求背景：最近开发管理系统，需要在本页面跳转到一个图片管理系统上传图片，上传成功后返回图片链接，然后返回管理系统，显示图片实现思路： ...

Youngdze 2019-08-22 17:17 评论0 收藏0
利用window.postMessage()实现跨域消息传递（JavaScript）

摘要：说明方法可以安全地实现对象之间的跨域通信。接收窗口随后可根据需要自行处理此事件。传递给的参数通过事件对象暴露给接收窗口。发送端程序发送消息的基本语法就是接收消息的窗口的引用。接收程序度空间从接收消息从收到消息演示地址跨域消息传递说明 window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的...

VincentFF 2019-08-22 15:13 评论0 收藏0
浅谈前端跨域

摘要：一什么是跨域跨域简单的理解就是同源策略的限制。同源策略限制的内容请求不能正常进行。同源策略默认地址是网页的本身。一、什么是跨域？跨域简单的理解就是JavaScript同源策略的限制。是出于安全的考虑，a.com域名下的js不能操作b.com或者c.com域名下的对象。当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算叫跨域。一个正常...

dunizb 2019-08-26 13:55 评论0 收藏0
杂谈：前端Web通信

摘要：作为开发同学的小伙伴客户端的浏览器，有点小调皮还做了一个同源策略的限制，当我们的数据请求遇到不同源的情况下跨域，我们就得尝试其它的通信方法，不能一条道走到黑。 showImg(https://segmentfault.com/img/bVburZO?w=600&h=450); Web2.0以来，Ajax的出世，解决了传统表单提交页面跳转，闪烁白屏等问题。使得Web页面可以实现局部更新，...

Betta 2019-08-23 10:29 评论0 收藏0