window.postMessage学习（问答式）

demo在文章末尾。

window.postMessage 

1、有什么用？

答：可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面同源时，这两个脚本才能相互通信。
window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。 

2、两个页面如何算同源？

答：在JavaScript中，同源（Same-Origin）是指两个页面的协议、域名和端口都相同。这是浏览器安全策略的一部分，用于限制不同源之间的交互，以防止潜在的安全风险。同源策略（Same-Origin Policy）是浏览器的一种安全机制，它要求浏览器只允许脚本访问与其自身源相同的资源。这意味着，如果一个JavaScript脚本在一个域名下运行，那么它只能访问该域名下的资源，不能访问其他域名下的资源，除非这两个域名之间有明确的跨域资源共享（CORS）设置。

具体来说，两个页面同源需要满足以下条件：

协议相同：例如，两个页面都使用http://或https://。
域名相同：例如，两个页面都是example.com或子域名如sub.example.com。
端口相同：如果两个页面使用不同的端口号，则它们不是同源的。默认情况下，http://的端口是80，https://的端口是443，但如果明确指定了其他端口号，则必须相同。
如果两个页面不满足上述条件中的任何一个，它们就被认为是不同源的，浏览器会阻止它们之间的一些交互行为，例如：

使用XMLHttpRequest或fetch发送跨域请求。在一个窗口中通过document.domain属性来访问另一个窗口的文档对象模型（DOM）。使用window.open、window.parent、window.top等窗口对象属性来访问或操作不同源的窗口。但是，为了支持一些合理的跨域交互需求，浏览器提供了跨域资源共享（CORS）等机制，允许服务器明确指定哪些源可以访问其资源。此外，postMessage方法是一个例外，它允许不同源的窗口之间安全地传递消息，只要正确地设置消息的来源和目标。

3、targetWindow.postMessage(message, targetOrigin, [transfer]); 语法说明：

（1）targetWindow指的是什么？
在JavaScript中，targetWindow 是一个对另一个浏览器窗口或者iframe的引用。当你想要从一个窗口向另一个窗口发送消息时，你需要有对这个目标窗口的引用。
有几种方式可以获取这样的引用： 

（1.1）iframe的contentWindow属性：如果你有一个<iframe>元素在你的页面上，你可以通过它的contentWindow属性获取对该iframe内部文档的引用。例如：

<iframe id="myIframe" src="http://example.com/iframe-content.html"></iframe>
<script>
  var iframe = document.getElementById('myIframe');
  var targetWindow = iframe.contentWindow;
  // 现在你可以使用targetWindow来向iframe发送消息
  targetWindow.postMessage('Hello from parent!', '*');
</script>

（1.2）window.open返回的窗口对象：当你使用window.open方法打开一个新的窗口或标签页时，这个方法会返回一个对新打开窗口的引用。你可以使用这个引用来与新窗口通信。例如：

var targetWindow = window.open('http://example.com/new-page.html', '_blank');
// 使用targetWindow向新窗口发送消息
targetWindow.postMessage('Welcome to the new page!', 'http://example.com');

（1.3）window.frames数组或命名窗口：如果你的页面包含多个iframe或frames，你可以通过window.frames数组来访问它们。每个元素都是对应iframe或frame的窗口对象。此外，如果iframe或frame有name属性，你还可以通过window.frames['name']来访问它。例如：

<iframe name="myFrame" src="http://example.com/frame-content.html"></iframe>
<script>
  var targetWindow = window.frames['myFrame'];
  // 或者使用数组索引，如果iframe是第一个的话
  // var targetWindow = window.frames[0];
  // 使用targetWindow向iframe发送消息
  targetWindow.postMessage('Message from main page!', '*');
</script>

（2）message,将要发送到目标 window 的数据。字符串，对象等都可以。
（3）targetOrigin
通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个 URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用 postMessage 传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的 origin 属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的 targetOrigin，而不是 *。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
（4）[transfer]      （常规场景下用不到该属性）
[transfer]是一个可选参数，它是一个包含可传输对象（transferable objects）的数组。这个参数允许你在发送消息时，将某些特定类型的对象的所有权从发送方直接转移给接收方，而不是进行深拷贝。可传输对象通常指的是那些包含大量数据，并且深拷贝成本较高的对象，比如ArrayBuffer、Map、Set、TypedArray（如Int8Array、Uint8Array等）以及某些特定类型的ImageBitmap。
通过将这些对象的所有权直接转移给接收方，可以大大提高数据传输的效率，减少内存使用，并提升性能。当你传递一个对象到[transfer]数组时，该对象的所有权将被转移，发送方将不再拥有该对象，而接收方将获得对该对象的完全所有权。这意味着发送方在传输之后不能再访问或修改该对象，而接收方可以自由地使用和修改它。
下面是一个使用[transfer]参数的例子：

// 假设我们有一个名为otherWindow的引用，它指向另一个窗口或iframe
var otherWindow = window.open('http://example.com/other-page.html', '_blank');

// 创建一个ArrayBuffer对象，它包含一些数据
var arrayBuffer = new ArrayBuffer(16);
var int32View = new Int32Array(arrayBuffer);
for (var i = 0; i < int32View.length; i++) {
  int32View[i] = i;
}

// 使用postMessage发送ArrayBuffer，并将所有权转移给接收方
otherWindow.postMessage({ data: arrayBuffer }, 'http://example.com', [arrayBuffer]);

// 在发送之后，发送方不能再访问arrayBuffer，因为它的所有权已经被转移了
// 尝试访问可能会导致错误
// console.log(int32View[0]); // Uncaught TypeError: Failed to read the '0' property from 'Int32Array': The object is no longer valid.

// 在接收方窗口中，可以通过监听message事件来接收消息和转移的对象
otherWindow.addEventListener('message', function(event) {
  if (event.origin !== 'http://your-origin.com') {
    return; // 忽略不是来自可信源的消息
  }

  // 接收方现在拥有arrayBuffer的所有权，并可以自由地访问和修改它
  var receivedArrayBuffer = event.data.data;
  var receivedInt32View = new Int32Array(receivedArrayBuffer);
  console.log(receivedInt32View[0]); // 输出：0

  // 接收方可以修改ArrayBuffer，但这不会影响发送方，因为所有权已经转移了
  receivedInt32View[0] = 42;
});

在上面的例子中，arrayBuffer的所有权被转移给了otherWindow。在发送方窗口中，一旦postMessage调用完成，arrayBuffer和任何基于它的视图（如int32View）都将变得不可用，尝试访问它们会导致错误。而在接收方窗口中，event.data.data将是一个新的ArrayBuffer对象，其内容是发送方arrayBuffer的副本，并且接收方可以自由地修改和使用它。
请注意，不是所有类型的对象都可以被传输。只有那些实现了[[Transfer]]内部方法的对象才能被传输，这通常限于上面提到的那些特定类型的对象。
尝试传输不支持的对象将导致错误。

4、targetWindow能不指定吗？

答：如果不指定接收消息的窗口，那么消息只能发往本窗口，只有本窗口才会接收到信息。

5、iframe和window都是窗口吗？

答：window对象表示浏览器窗口，是JavaScript中最顶层的对象。iframe元素是HTML中的内联框架元素，可以在当前窗口中嵌套另一个窗口，因此iframe也可以被视为一个窗口。在JavaScript中，可以通过window对象来访问和操作当前窗口，而iframe元素也有自己的window对象，可以通过iframe的contentWindow属性来访问和操作iframe窗口。 

6、监听分发的 message 事件

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
  var origin = event.origin;
  // 验证了所受到信息的 origin (任何时候你都应该这样做)
  if (origin !== "http://example.org:8080") return;
  console.log('来信内容如下：', event.data)
  // 把 event.source作为回信的对象，再把 event.origin 作为 targetOrigin
  event.source.postMessage(
    "谢谢，我收到你的来信了",
    event.origin,
  );
}

event的属性有
data：
从其他window传递过来的message数据
origin：
调用 postMessage 时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。
例如“https://example.org (隐含端口 443)”、“http://example.net (隐含端口 80)”、“http://example.com:8080”。
source：
对发送消息的窗口对象的引用; 你可以使用此来在具有不同 origin 的两个窗口之间建立双向通信。

主页面和iframe子页面使用postMessage通讯示例：

(注意：不要用vscode自带的live preview插件打开页面，live preview打开时发现不知从哪触发的各种postMessage信息，推荐用live server插件打开页面)

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Main Page</title>
</head>

<body>
  <h1>Welcome to the Main Page!</h1>
  <iframe src="iframe.html" id="myIframe" width="400" height="200"></iframe>

  <script>
    // 获取iframe的引用
    var iframe = document.getElementById('myIframe')

    // 监听来自iframe的消息
    window.addEventListener('message', function (event) {
      // console.log(event)
      // 这里仅作示例，实际应用中务必对event.origin进行验证
      // if (event.origin !== 'http://example.com') {
      //   // 验证消息的来源
      //   return
      // }
      alert('Received message from iframe: ' + event.data)

      // 回复iframe
      iframe.contentWindow.postMessage('Hello from Parent!', '*')
    }, false)

    // 发送消息给iframe
    function sendMessageToIframe () {
      iframe.contentWindow.postMessage('Hello from Parent!', '*')
    }
  </script>

  <button onclick="sendMessageToIframe()">发送消息给iframe</button>
</body>

</html>

iframe.html

<!DOCTYPE html>
<html>

<head>
  <title>Iframe Page</title>
</head>

<body>
  <h1>Welcome to the Iframe Page!</h1>
  <button onclick="sendMessageToParent()">发送消息给parent</button>

  <script>
    function sendMessageToParent () {
      // 向父页面发送消息
      parent.postMessage('Hello from Iframe!', '*')
    }

    // 监听来自父页面的消息
    window.addEventListener('message', function (event) {
      // console.log(event)
      // 这里仅作示例，实际应用中务必对event.origin进行验证
      // if (event.origin !== 'http://example.com') {
      //   // 验证消息的来源
      //   return
      // }
      alert('Received message from parent: ' + event.data)
    }, false);
  </script>
</body>

</html>