postMessage

postMessage 被设计用来在窗口(window)间通信,特别地,用于跨域间的通信(可携带 cookie)。可支持在普通的页面、iframe / frame、用 open 打开的新窗口间使用。

使用的方法是:targetWindow.postMessage(message, targetOrigin),接收的事件是message

其中message不限定为字符串,targetOrigin是用来指定接收方的 Origin,不符合时浏览器禁掉该请求抛出异常,可以是 * ,但建议指定为具体的。

下面是一个单向通信的示例(A -> B)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// A domain
windowB.postMessage('just a message', 'http://bdomain');


// B domain
window.onmessage = function(e) {
    // for safety
    if (e.origin == 'http://bdomain') {
        // source origin
        alert(e.source);
        // message data
        alert(e.data);
    }
};

通过设置隐藏的跨域 iframe,然后通过该 iframe 可以实现跨域无刷新提交需求。

这里是一个 DEMO

References

  1. postMessage – MDN
  2. compability – Can I use