不同域名的页面进行通信，通过iframe和postMessge进行消息通信

本文为艾小逗原创文章，未经允许不可转载。转载请注明出处

本文链接：https://blog.csdn.net/qq_32442967/article/details/136171494

本文介绍了如何在浏览器的不同标签页，尤其是在不同域名的情况下，利用WebSocket、Server-SentEvents、SharedArrayBuffer、Atomics和PostMessageAPI进行消息通信，包括WebSocket的全双工通信、SSE的单向推送以及如何通过父页面和子页面的交互实现跨域通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不同域名的页面，通过iframe和postMessge进行消息通信

前言

浏览器不同标签页之间进行消息通信，尤其是当这些标签页位于不同域名时，通常需要使用一些特定的技术或协议来实现。以下是几种可能的方法：

WebSocket：WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许服务器主动向客户端发送消息。因此，你可以在每个标签页中设置一个 WebSocket 客户端，连接到同一个 WebSocket 服务器。当某个标签页需要发送消息时，它可以通过 WebSocket 连接将消息发送到服务器，然后服务器再将消息广播到所有连接的标签页。
Server-Sent Events (SSE)：SSE 是一种允许服务器向客户端推送事件的简单技术。与 WebSocket 类似，你可以在标签页中设置一个 SSE 客户端，连接到服务器。服务器可以向所有连接的标签页发送事件。但是，与 WebSocket 相比，SSE 是单向的，只能从服务器发送到客户端。
SharedArrayBuffer 和 Atomics：SharedArrayBuffer 和 Atomics 是 ECMAScript 标准的一部分，它们允许在多个 Worker 或浏览器标签页之间共享内存。你可以使用这些 API 在不同标签页之间传递数据。但是，这种方法需要小心处理并发和同步问题，因为多个标签页可能会同时访问和修改共享内存。
PostMessage API：虽然 PostMessage API 主要用于不同源窗口之间的通信，但你也可以用它来实现不同标签页之间的通信。每个标签页都可以监听来自其他标签页的消息，并在接收到消息时执行相应的操作。然而，这种方法需要手动管理消息的发送和接收，可能会比使用 WebSocket 或 SSE 更复杂。
需要注意的是，由于浏览器的同源策略限制，不同域名的标签页之间不能直接进行通信。因此，上述方法都需要一个中间服务器来转发消息或提供共享资源。另外，这些方法的可用性和性能可能会受到网络条件、服务器性能等因素的影响。

实现代码

父级页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父页面-端口9001</title>
</head>
<body>
父页面
<button onclick="sendToChild()">给子页面发送消息-获取token</button>
<iframe src="http://localhost:9002/children.html" id="childIframe" style="width: 200px;height: 200px"></iframe>
<script>
    <!--  监听消息事件  -->
    window.addEventListener("message", function (event) {
        if (event.origin !== 'http://localhost:9002') return;
        if (event.data && event.data.method === 'getToken') {
             alert('父页面获取到子页面的token了:'+ event.data.data)
        }
    });

    // 向子页面发送消息
    function sendToChild() {
        var childIframeDom = document.getElementById('childIframe')
        var iframeWindow = childIframeDom.contentWindow
        iframeWindow.postMessage({method: 'needToken'}, 'http://localhost:9002')
    }
</script>
</body>
</html>

子级页面代码

<!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>子页面-端口9002</title>
</head>
<body>
子页面-可隐藏
<script>
    window.addEventListener("message", function (event) {
        if (event.origin !== 'http://localhost:9001') return;
        if (event.data && event.data.method === 'needToken') {
            var token = localStorage.getItem('token')
            // 子页面向父页面发送消息
            window.parent.postMessage({method: 'getToken', data: token}, 'http://localhost:9001')
        }
    });
</script>
</body>
</html>