深入跨域 - 解决方案

1 前言

前文 《深入跨域 - 从初识到入门》 中，大家已经对同源与跨域的产生历史与重要性等有了一个初步的了解了，那么我们应该如何解决在日常开发中遇到的跨域引起的问题呢？

2 一览图

我们将日常开发中的跨域解决方案大体分为两类：iframe跨域 与 API跨域:

3 iframe跨域

3.1 otherWindow.postMessage

otherWindow.postMessage(message，targetOrigin) 方法是 HTML5 引进的特性，可以使用它来向其它的 window 对象发送消息，无论这个 window 对象是属于同源或不同源，使用起来也比较简单。

调用 postMessage 方法的 window 对象是指要接收消息的那一个 window 对象，该方法的第一个参数 message 为要发送的消息，类型只能为字符串；第二个参数 targetOrigin 用来限定接收消息的那个 window 对象所在的域，如果不想限定域，可以使用通配符 *。

需要接收消息的 window 对象，可以通过监听自身的 message 事件来获取传过来的消息，消息内容储存在该事件对象的 data 属性中。

A页面向B页面发送信息：

发送信息 - 页面 http://a.com/index.html 的代码：

<iframe src="http://b.com/index.html" id="myIframe" onload="test()" style="display: none;" />
<script>
  // 1. iframe载入 http://b.com/index.html 页面后会执行该函数
  function test() {
    // 2. 获取 http://b.com/index.html 页面的 window 对象，
    // 然后通过 postMessage 向 http://b.com/index.html 页面发送消息
    var iframe = document.getElementById('myIframe');
    var win = iframe.contentWindow;
    win.postMessage('我是来自 http://a.com/index.html 页面的消息', '*');
  }
</script>
1
2
3
4
5
6
7
8
9
10
11

接收信息 - 页面 http://b.com/index.html 的代码：

<script type="text/javascript">
  // 注册 message 事件用来接收消息
  window.onmessage = function(e) {
    e = e || event; // 获取事件对象
    console.log(e.data); // 通过 data 属性得到发送来的消息
  }
</script>
1
2
3
4
5
6
7

•data：从其他 window 中传递过来的对象。

•origin：调用 postMessage 时消息发送方窗口的origin源。这个字符串由 协议 +