最近看到一个解决跨域的方法,记录一下
window.postMessage()
方法被调用时,会在所有页面脚本执行完毕之后,向目标窗口派发一个messageEvent
消息,该messageEvent
消息有四个属性:
- message 属性表示该message 的类型
- data 属性为 window.postMessage 的第一个参数
- origin 属性表示调用window.postMessage() 方法时调用页面的当前状态
- source 属性记录调
语法
otherWindow.postMessage(message,targetOrigin,[transfer]);
otherWindow:其他窗口的引用,比如iframe的contentWindow属性
message:将要发送到其他window的数据,这个数据会自动被序列化,数据格式也不受限制(字符串,对象都可以)
targetOrigin:通过窗口的origin属性来指定哪些窗口能接收到消息事件,这个值可以是"*"(表示无限制),或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或者端口这三个的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送。这个值最好始终存在,而不是*
,这样能有效的避免第三方截获
transfer(可选):是一串和message同事传递的Transferable
对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。
例子:
上面的例子中,点击发送,会发送一个字符串给iframe引入的页面,然后通过监听message事件,然后做相应的操作。
相应的,点击iframe页面里面的按钮,也能发送数据给parent页面
并且这两个页面在不同的域名下,也是不影响操作的。