背景
我们Web前端开发者一般都会有这样的常识：同一浏览器打开了两个不同域名的网页，两个页面之间被沙箱隔了，因此是无法进行数据交互的。这两个页面一旦尝试用JS相互访问资源，便会报错。
除非，你是借助服务端的能力（例如：AJAX或者WebSocket之类），间接地进行通讯。
浏览器限制站点跨域访问是出于保护客户端信息安全需要，这一点无可厚非。但我们Web前端的某些开发场景，确实有需求跨域做交互，怎么办呢？
下面分享一下我的做法。
PS. 因为今天我想讨论的是纯前端的技术解决方案，依赖服务端解决办法忽略掉。Ajax 和 WebSocket，你们都要出局啦！
两种跨域场景
Web跨域的场景通常有两种：
- 1.
iframe的内嵌页面与主窗口页面之间的通讯 - 2.通过
window.open打开新窗口与母窗口（opener）之间的通讯
我下面的案例会分别针对这两种场景提供对应的方案。
方案1:使用window.postMessage的API
window.postMessage 是 html5 引入的新API，它允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档、多窗口、跨域消息传递，多用于窗口间数据通信。
从上面的介绍可以看出来，这算是w3c标准的跨域通信的解决方案。
首先我们模拟一个跨域场景：假设我有两个网页，访问地址分别为
- http://a.example.com/test.html
- http://b.example.com/test.html
其中A作为主页面，B作为子页面（iframe嵌入或者window.open打开的页面）。
1、处理iframe跨域的代码示例
A页面代码：
<html> <head> <title>Example CORS for iframe</title> </head> <body> <button>Post Message</button> <p></p> <iframe src="http://b.example.com/test.html" width="500" height="300"></iframe> </body> <script> const iframe = document.querySelector('iframe'); const button = document.querySelector('button'); const msg = document.querySelector('p'); button.addEventListener('click', () => { iframe.contentWindow.postMessage('hello', '*'); }); window.addEventListener('message', (event) => { msg.innerText = `Message from iframe: ${event.data}`; }); </script> </html>- B页面代码：
```
<title>Inner Page</title>Hi, this is an inner page
 #### 2、处理弹窗的跨域的代码示例 - A页面代码：Example CORS for window.open - B页面代码：Inner Page Hi, this is an inner page
 ### 方案2:利用`window.name`传递信息 #### 处理iframe跨域的代码示例（一） - A页面代码：Example CORS for iframe - B页面代码：Inner Page Hi, this is an inner page
- 注意：不出意外的话，马上就要出意外了……  以上报错证明：非常可惜，现代浏览器已经把这个口子给堵上了，这个方法仅适用于古代的浏览器。但是不要沮丧，既然我敢发出来，肯定还有别的招数。虽然不完太美，能够使用的范围有限，聊胜于无吧。 #### 处理iframe跨域的代码示例（二） 这个方案我们需要增加一个跟页面A同域的空白页面作为跳板，例如： - http://a.example.com/empty.html `empty.html`页面完全为空，不包含任何代码也没关系。做好这一步后，我们来重写A、B两个页面的代码： - A页面代码：Example CORS for iframe
- B页面代码：```
总结
- 以上两种方法，便是纯前端实现的跨域通讯。
window.postMessage是浏览器的标准API，它实现的通讯非常实时，而且代码的实现方式也相当优雅，强烈推荐大家使用。当然，使用的时候要注意浏览器兼容性，兼容旧版的浏览器比如IE，那么可以考虑用另外一个方案。- 利用
window.name也确实能够实现在iframe跨域通讯的目标，尽管代码看起来比较绕。不过，也确实是打了折扣，因为信息传递只能有单向的通道（A页面获取B页面的信息）。当然，如果想实现A=>B传递信息，也有其他手段，譬如利用URL来传递参数。总的来说，该方案应该属于远古时代的产物，如果不考虑兼容旧的浏览器，不推荐大家在项目上使用。可以把它放到代码的博物馆中，慢慢欣赏，就好比今天我们像看古人如何钻木取火一般。
