PostMessage的原理和实际应用

本文探讨了PostMessage的原理和实际应用,强调其在跨域通信中的价值,尤其是在实现不同网页间的联动。文章指出,PostMessage不仅能解决ajax跨域问题,还能创建安全的双向通信通道。常见应用包括获取iframe信息、模拟API调用和实时回调,例如在支付场景中实现实时订单状态更新。此外,通过PostMessage构建第三方登录SDK,提供安全、便捷的跨域服务。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

PostMessage的原理和实际应用

文章主要想聊的是关于 PostMessage 的用途。虽然搜索引擎里关于 PostMessage 文档一抓一大把,大多是介绍api,说明它能跨域等,但关于它的实际应用方面的探讨说明并不多,没能体现出它的价值。

首先,我们大概解一下PostMessage的原理

PostMessage 是 html5 新引进的一个可跨源通信 api,你可以通过这个 api,让主页面和任意 frame 类页面或 window.open 打开的页面进行双向通信。它的大概运作流程如下图:

PostMessage流程示意
简而言之,通过 PostMessage,你可以跨域实现两个网页间的通讯。
关于它的用法,需要注意的几点:

  • 首先,信息传递安全问题。为了你的信息传递能准确传达,无论是作为主页面还是子页面,传递重要信息时都应该填写 origin 而不是 “*”,避免被截获。
  • 其次,iframe 或者 window.open 的 load 事件是不准确的。为了避免漏发漏接的情况,建议在通讯页面里回传加载状态。

另外,它的兼容性也是非常喜人的,一片绿油油,可以放心大胆的使用。(数据来源: caniuse
canius

如果需要更进一步了解 api 的用法,可以查阅一下【详细文档】,我偷个懒,不详细说明了~

了解过后,开始进入正题

如果仅仅只是为了解决ajax跨域,其实方案很多,像 cors、jsonp等就足够了。PostMessage 的价值体现,应该是能让两个不同的网页之间建立联动。

抛开 PostMessage,直接和某个网站通讯是不可行的,浏览器的安全策略会限制你的所有操作。这种情况下,你能通讯的就只有那个网站的服务器接口,通过跨域支持,实现信息交互。这种方式很稳健,缺点也比较明显:

  • 需要和对方服务器通讯,跨域是需要额外设置才能支持的,这个需要和对方沟通协商。
  • 如果需要提取对方网页里的某个值,或者通知对方有交互变化,除了通过ajax轮询,由服务器代为传递信息,别无它法。

下面,【A】代表主页面,【B】代表 iframe 或者 window.open 打开的页面,简单列举一下 PostMessage的常见应用:

  • 【A】需要【B】中得到信息做适配,如获取网页文档宽高做自适应弹窗等。
  • 当【B】服务器的api接口不对外使用,不提供跨域支持,但【A】又需要使用【B】的api服务支持。 此时【B】仅需要提供一个基于 PostMessage 搭建的服务支持,即可完成从校验到调用等操作,【A】在过程中不需要接触 ajax 请求,就能得到相应的结果。
  • 页面实时回调。举个栗子,假设你要做一个商城,在你的订单页进行到支付步骤的时候,采用了 window.open 的方式打开了支付平台的页面。
    常规情况下,你需要 ajax 轮询订单状态,或者弹出一个类似【是否已完成支付?】的弹窗,当用户操作时再ajax获取订单状态。
    在 PostMessage 的支持下,你可以实时得到支付平台的反馈信息,如用户是否已经完成 / 取消了订单。在用户重新回到你的页面时,就可以展示出相应的结果反馈了。

下面用【第三方登录 SDK】的制作思路拓展说明一下。

首先捋一下思路,记得,我们才是提供服务的一方。面对 cp 和用户,提供的 api 就应该是一键运行的模式,越简明约好,如初始化等逻辑都应该在我们的这边自动完成。
在这个前提下,向 cp 提供一个可引用执行的 sdk.js 是最简单不过的,cp 只需要引用和调用即可。

那么你的 sdk 应当:

  • 自动完成初始化,如实例化 sdk、建立队列暂存任务、监听信息等
  • 静默 iframe 打开通讯支持页面,建立联系
  • 进入可运行状态之后,自动运行积压在队列里的任务
  • 在用户操作页面触发sdk请求时,检测请求数据格式,通过 PostMessage 发出请求
  • 得到来自通讯支持页面的信息,自动过滤,分类执行

而通讯支持页面则:

  • 在被加载打开时,进行第一轮校验
  • 在收到身份验证信息时,检查是否符合白名单
  • 在收到其他请求时,按白名单结果,决定是否提供服务。是则再发起相关请求,得到结果;否则拒绝服务。最后无论成功失败,都通过 PostMessage 响应相应的操作。

运行逻辑流程图如下:

在这里插入图片描述
综上所述
PostMessage 简单应用能为你带来跨域支持,不同页面间实现信息交互;在高级应用时,基于它能在服务方和第三方之间架设一个安全实时且不耗带宽【服务平台】,如服务器后端一样工作。PostMessage 使用虽然简单,但只要用得好,真的可以说是一把利刃~

文章到此结束,感谢你的阅读!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值