iframe跨域,但又需要进行通信,决定使用window.postMessage进行通信。以下是使用中遇到的一些注意点。
iframe跨域下获取window的限制
-
获取子窗口window对象是受限的
正常window对象:
正常window对象
受限的window对象
受限的window对象打印展示global,一开始以为是非window对象,后来经实验发现其实它就是子iframe的window对象,只不过是跨域受限,只能访问部分接口
是同一个window证明:是同一个window证明
通过给iframe传消息,获取到父级窗口的window,拿iframe的window跟父级的frames里存的iframe的受限window进行判断,结果为true。
-
子窗口获取父窗口的window对象也是受限的
访问父窗口的window对象也是受限
坑点
一开始以为只要调用window.parent.postMessage('test'); 就能给父级传数据;
-
同域下确实可以同域下确实可以
-
跨域却不行跨域不行,没有弹出消息
解决方法
后来查了接口postMessage接口说明
第二个参数指定哪个窗口可以接受消息,不在指定范围内的,不会传播。
所以猜测第二个参数不传的话,默认是同域窗口可以接收。所以才会出现同域可以,跨域接收不到。
验证:加上第二个参数,通信成功
一般不建议用*,会有安全问题,这里只作为测试
总结
window.postMessage的第二个参数指定哪些窗口可以接收消息,不指定的话默认是同域可接收。故跨域情况下,需要指定第二个参数为父级域名,才能通信成功。