标签： postMessage

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

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

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

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

// 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