window.parent.postMessage 怎么设定接收者

`window.parent.postMessage` 方法用于在浏览器的同源策略下，从一个文档向另一个文档（通常是指嵌套在其中的父文档）安全地发送数据。它的第二个参数是用来设置接收者的，它有两种常见用法：

1. **通配符(*)**：当你传入 `'*'` 作为第二个参数时，这意味着这个消息将被接受并处理的所有窗口（包括当前窗口及其所有父窗口）。这是默认的行为，如果你不明确指定接收者，那么通常就是发送给所有的父级窗口。

2. **具体的URL或窗口引用**：如果你想要更精确地控制接收者，可以提供一个特定的URL字符串，如 `'http://example.com'` 或者 `window.top`、`window.self`等，这会限制消息只能发送给匹配该URL的窗口。例如，`window.parent` 表示发送给当前窗口的父级窗口，而 `window.top` 则发送给顶级窗口（即最外层浏览器窗口）。

注意，为了保证安全性，`window.postMessage` 只能在同一协议（HTTP/HTTPS）、同一端口以及相同的域名下的窗口之间发送数据，除非双方都在服务器上设置了特殊的跨域策略（如 CORS）。

相关问题

window.parent.postMessage Specify a target origin for this message

`window.parent.postMessage` 是浏览器提供的一种在同源策略下，从嵌套窗口（child window）向顶层窗口（parent window）传递数据的方法。它允许跨域通信，但有一定的安全性限制，通常用于跨iframe的父子页面之间传递信息。

当你需要在一个网页的子框架或弹出窗口里发送消息到父级窗口时，可以这样做：

1. **发送消息**：首先，要在子窗口的 JavaScript 中调用 `postMessage` 函数，传入你想发送的数据以及目标接收者（origin，通常是父窗口的 URL 或 `'*'` 表示任何源）。

   window.parent.postMessage('data', 'http://parentdomain.com');

2. **接收消息**：在父窗口，需要添加一个事件监听器处理接收到的消息，比如 `message` 事件：

   window.addEventListener('message', function(event) {
       if (event.origin === 'http://parentdomain.com') {
           console.log('Received data:', event.data);
       }
   }, false);

window.parent.postMessage(data);// TODO.add 怎么使用

`window.parent.postMessage(data);` 是JavaScript中的一种跨域通信技术，通常用于Web应用嵌套框架或在IFrame中传递数据。这里的 `parent` 指的是当前窗口的父窗口，`postMessage` 方法则是发送消息到另一个文档。

当你需要从一个子窗口（如iframe内的脚本）向其父窗口（通常是浏览器的顶层窗口）发送数据时，可以这样做：

1. **发送数据**：
- 定义一个包含你想发送的数据的变量 `data`（例如字符串、对象等）。
- 使用 `window.parent.postMessage()` 函数，传入数据作为第一个参数。

window.parent.postMessage({ key: 'value', someData: 'example' }, '*');

这里的第二个参数通常设置为'*'，表示接收者可以来自任何源，如果不指定则只允许同源通信。

2. **在父窗口接收**：
父窗口通过 `message` 事件监听器处理接收到的消息，例如：

window.addEventListener('message', function(event) {
  if (event.origin !== '*' && !event.origin.includes(location.host)) return;
  console.log('Received data:', event.data);
});

这里检查了消息来源是否安全，并打印出接收到的数据。