跨域消息传输window.postMessage()

该方法是HTML5用于跨域消息传输的API

发送窗口

window.postMessage()方法被调用时,会在所有页面脚本执行完毕之后(e.g., 在该方法之后设置的事件、之前设置的timeout 事件,etc.)向目标窗口派发一个 MessageEvent消息。 该MessageEvent消息有四个属性需要注意:
message 属性表示该message 的类型;
data 属性为 window.postMessage的第一个参数;
origin 属性表示调用window.postMessage()方法时调用页面的当前状态;
source 属性记录调用window.postMessage()方法的窗口信息。
语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow:表示发送数据的窗口的window的引用,包括iframe的contentWindow属性和通过window.open打开的新窗口。
message表示要发送的数据,包扩字符串和对象(ie9以下不支持,可以利用字符串和json互换)。
origin表示接收窗口的域。

接收窗口

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  // For Chrome, the origin property is in the event.originalEvent
  // object.
  var origin = event.origin || event.originalEvent.origin; 
  if (origin !== "http://example.org:8080")
    return;

  // ...
}

回调函数接受一个事件对象event, event包含属性
data:接受的数据
origin:发送窗口的域
source:发送端的DOMWindow对象

你可能感兴趣的:(跨域消息传输window.postMessage())