使用window.postMessage进行iframe跨域数据通信

iframe跨域,但又需要进行通信,决定使用window.postMessage进行通信。以下是使用中遇到的一些注意点。

iframe跨域下获取window的限制

  1. 获取子窗口window对象是受限的

    正常window对象:
    正常window对象

受限的window对象:
受限的window对象

受限的window对象打印展示global,一开始以为是非window对象,后来经实验发现其实它就是子iframe的window对象,只不过是跨域受限,只能访问部分接口

是同一个window证明:
是同一个window证明

通过给iframe传消息,获取到父级窗口的window,拿iframe的window跟父级的frames里存的iframe的受限window进行判断,结果为true。

  1. 子窗口获取父窗口的window对象也是受限的


    访问父窗口的window对象也是受限

坑点

一开始以为只要调用window.parent.postMessage('test'); 就能给父级传数据;

  • 同域下确实可以
    同域下确实可以
  • 跨域却不行
    跨域不行,没有弹出消息

解决方法

后来查了接口
postMessage接口说明

第二个参数指定哪个窗口可以接受消息,不在指定范围内的,不会传播。

所以猜测第二个参数不传的话,默认是同域窗口可以接收。所以才会出现同域可以,跨域接收不到。

验证:
加上第二个参数,通信成功

一般不建议用*,会有安全问题,这里只作为测试

总结

window.postMessage的第二个参数指定哪些窗口可以接收消息,不指定的话默认是同域可接收。故跨域情况下,需要指定第二个参数为父级域名,才能通信成功。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容