当a.qq.com域名下的页⾯或脚本试图去请求b.qq.com域名下的资源时，就是典型的跨域行为。跨域的定义从受限范围可以分为两种，⼴义跨域和狭义跨域。

（一）广义跨域

⼴义跨域通常包含以下三种⾏为：
1. 资源跳转：a链接、重定向。
2. 资源嵌⼊：、

• document.domain+iframe⽅案优点：

实现逻辑简单，⽆需额外中转页⾯

• document.domain+iframe⽅案缺点：

仅适⽤于主域相同，⼦域不同的前端通信跨域场景

2.location.hash+iframe

当两个不符合同源策略且主域不同的页⾯需要进⾏跨域通信时，可以利⽤url的hash值改变但不刷新页⾯的特性，实现简单的前端跨域通信。

• location.hash+iframe⽅案优点

可以解决主域不同的前端通信跨域问题。
hash改变，页⾯不会刷新。

• location.hash+iframe⽅案缺点：

受部分浏览器安全机制限制，需要额外的同源中转页⾯，且中转页⾯需要js逻辑来修改hash值。
通信数据类型及长度均受限，且数据外显在url上，存在⼀定安全风险。

3.window.name+iframe

window.name属性的独特之处在于，name值在不同页⾯（甚⾄不同域名）加载后依旧存在，并且可以⽀持⾮常长的name值（2MB）。

window.name+iframe代码⽰例：

• window.name+iframe⽅案优点：

可以解决主域不同的前端通信跨域问题。
通信数据类型不受限，且长度可达2MB。

• window.name+iframe⽅案缺点：

需要额外的同源中转页⾯，但中转页可以为空⽩页。

4.postMessage

postMessage是HTML5 XMLHttpRequest Level2中的API，且是为数不多可以跨域操作的window属性之⼀，它通常⽤于解决以下⽅⾯的问题：

1. 页⾯和其打开的新窗⼝的数据传递。
2. 多窗⼝之间消息传递。
3. 页⾯与嵌套iframe消息传递。

postMessage是⼀种安全的跨域通信⽅法。当a.html获得对b.html的window对象后，a.html调⽤postMessage⽅法分发⼀个MessageEvent消息。b.html通过监听message事件即可获取a.html传递的数据，从⽽实现跨域通信。

• postMessage⽅法的语法如下：

otherWindow.postMessage(message、targetOrigin、[transfer])

otherWindow:⽬标窗⼝的window对象，⽐如iframe的contentWindow属性、执⾏window.open返回的window对象等。

message:将要发送给其他window的数据。

targetOrigin:指定哪些窗⼝能接收到消息事件，其值可以是字符串*（表⽰⽆限制）或者是“协议+主机+端⼝号”。

transfer（可选）:是⼀串和message同时传递的Transferable对象，这些对象的所有权将被转移给消息的接收⽅，⽽发送⼀⽅将不再保有所有权。

postMessage⽅案代码⽰例：

• postMessage⽅案优点：

可以解决多种类型的前端跨域通信问题；

• postMessage⽅案缺点：

兼容性⽅⾯相对差⼀点，IE8及以下浏览器不⽀持该⽅法，IE9只⽀持postMessage传递string类型的数据，⽽标准的postMessage消
息数据可以是任何类型。