window.postMessage使用详解（参数、transferable接口详解、使用注意点、示例）

最新推荐文章于 2024-08-04 00:46:01 发布

YF-SOD

最新推荐文章于 2024-08-04 00:46:01 发布

阅读量3.1w

点赞数 28

分类专栏： JavaScript 文章标签： postMessage详解 iframe和窗口传递消息方法跨域解决方法之一监听message事件 transferable接口

本文链接：https://blog.csdn.net/AIWWY/article/details/121666983

版权

JavaScript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

window.postMessage(message, targetOrigin, [transfer])

window.postMessage(message, targetOrigin, [transfer])

可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件 (en-US)。传递给 window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。

参数

参数	说明
window	窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames（注意需要用相同的window监听消息）。
message	只能为字符串，将要发送到其他 window的数据。
targetOrigin	指定哪些窗口能接收到消息事件，其值可以是（表示无限制）或者一个 URI（注意指定URI不支持跨域，会报错，而号支持跨域**）。
transfer	可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。`Transferable` 接口代表一个能在不同可执行上下文之间，列如主线程和 Worker 之间，相互传递的对象。

transferable详解

Transferable - Web API 接口参考 | MDN

使用注意点

1.监听时使用window.addEventListener("message",(e)=>{}, false)，必须保证监听的window和发送消息的window相同。

2.需要确定先监听了message事件，再发送的消息。

3.targetOrigin指定了URI的话，必须是相同的域和端口号，不然会报跨域错误。

4.targetOrigin使用*号的话，支持跨域，我们可以通过监听消息的默认参数e.origin来判断是否接收到了正确的消息

实例

窗口1

端口5050

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>窗口1</div>
    <iframe src="http://127.0.0.1:5501/2.html" frameborder="1" id='123' name="abc"></iframe>
    <script>
        window.onload = function () {
            setTimeout(() => {
                window.top.postMessage('handsome', '*')
            }, 0)
        }
    </script>
</body>
</html>

窗口2

端口5051

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>窗口2</div>
    <script>
        top.addEventListener('message',(e)=>{console.log(e)},false)
    </script>
</body>
</html>