window​方法：post​Message()

postMessage()方法

window.postMessage()方法安全地启用Window对象之间的跨源通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。
通常，当且仅当它们源自的页面共享相同的协议、端口号和主机（也称为“同源策略”）时，允许不同页面上的脚本相互访问。window.postMessage()提供一种受控制的机制来安全地规避这种限制（如果使用得当）。
从广义上讲，一个窗口可以获得对另一个窗口的引用（例如，可以使用targetWindow=window.opener），然后使用targetWindow.postMessage() 在其上发送一个MessageEvent。然后，接收窗口可根据需要自由处理此事件。传递给window.postMessage()的参数（即“message”）通过事件对象暴露给接收窗口。
postMessage()方法语法如下：

targetWindow .postMessage（message，targetOrigin，[ transfer ]）;

targetWindow
对将接收消息的窗口的引用。获得此类引用的方法包括：

• Window.open （生成一个新窗口然后引用它）。
• Window.opener （引用产生这个的窗口）。
• HTMLIFrameElement.contentWindow（从其父窗口引用嵌入式）。
• Window.parent（从嵌入式内部引用父窗口）。
• Window.frames +索引值（命名或数字）。

message
要发送到其他窗口的数据。使用结构化克隆算法序列化数据。这意味着您可以将各种各样的数据对象安全地传递到目标窗口，而无需自己序列化。
targetOrigin
指定要调度的事件的targetWindow的原点，可以是文字字符串"*"（表示没有首选项），也可以是URI。如果在计划调度事件时，targetWindow文档的方案，主机名或端口与targetOrigin提供的内容不匹配，则不会调度该事件；只有当所有的三个条件都匹配时，将调度该事件。该机制可以控制发送消息的位置。
transfer（可选的）
是与消息一起传输的Transferable对象序列。这些对象的所有权将提供给目标端，并且它们在发送端不再可用。

已调度的事件

otherWindow可以通过执行以下JavaScript来侦听已分派的消息：

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}

data
从另一个窗口传递的对象。
origin
调用当时发送消息的窗口的原点postMessage。此字符串是协议和“：//”的串联，如果存在，则为主机名，如果存在端口，则“：”后跟端口号，并且与给定协议的默认端口不同。典型起源的例子是https://example.org（意味着端口为443），http://example.net（意味着端口为80）和http://example.com:8080。请注意，此来源不保证是该窗口的当前或未来来源，该窗口可能已被导航到调用postMessage后的其他位置。
source
对发送消息的window对象的引用；你可以使用它来建立两个不同来源的窗口之间的双向通信。

安全问题部分

如果您不希望从其他站点接收消息，请不要为message事件添加任何事件侦听器。这是避免安全问题的完全万无一失的方法。
如果您确实希望从其他站点接收消息，则请始终使用origin和可能的source属性验证发件人的身份。任何窗口（例如，包括http://evil.example.com）都可以向任何其他窗口发送消息，并且您无法保证未知发件人不会发送恶意消息。但是，在验证了身份后，您仍应始终验证收到的消息的语法。否则，您信任的站点中的安全漏洞只能发送受信任的消息，然后可以在站点中打开跨站点脚本漏洞。
在postMessage用于将数据发送到其他窗口时，始终指定精确的目标原点，而不是*。恶意站点可以在您不知情的情况下更改窗口的位置，因此它可以拦截使用postMessage发送的数据。