跨页面进行数据通讯

榴莲不好吃

已于 2024-09-02 17:39:30 修改

阅读量539

点赞数 4

分类专栏：基础文章标签： javascript 前端开发语言

于 2024-09-02 17:34:07 首次发布

本文链接：https://blog.csdn.net/sllailcp/article/details/141822976

版权

基础专栏收录该内容

30 篇文章 4 订阅

订阅专栏

跨页面进行数据通讯

1.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）
2.使用 LocalStorage 或 SessionStorage（同源）
3.Broadcast Channel API（同源）

1.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）

A页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父页面</title>
</head>
<body>
    <h1>父页面</h1>
    <iframe id="childFrame" src="http://localhost/B.html" width="400" height="300"></iframe>
    <button id="sendMessageButton">发送消息给子页面</button>
    <div id="receivedMessage"></div>

    <script>
        const origin = "http://localhost:9933"
        document.getElementById('sendMessageButton').addEventListener('click', function() {
            const message = 'Hello 来自父亲的消息!';
            const childFrame = document.getElementById('childFrame');
            childFrame.contentWindow.postMessage(message, childFrame.src);
        });

        window.addEventListener('message', function(event) {
            if (event.origin !== origin) {
                // 检查消息来源，确保来自正确的源
                return;
            }
             // 防止消息循环
             if (event.source === window) {
                return; // 忽略来自自身的消息
            }
            console.log("A");
            console.log(event.origin);
            document.getElementById('receivedMessage').innerText = event.data;
        });
    </script>
</body>
</html>

B页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子页面</title>
</head>
<body>
    <h1>子页面</h1>
    <button id="sendMessageButton">发送消息给父页面</button>
    <div id="receivedMessage"></div>

    <script>
        const origin = "http://localhost:9976"
        document.getElementById('sendMessageButton').addEventListener('click', function() {
            const message = 'Hello 来自儿子的消息!';
            window.parent.postMessage(message, origin);
        });

        window.addEventListener('message', function(event) {
            if (event.origin !== origin) {
                // 检查消息来源，确保来自正确的源
                return;
            }

            document.getElementById('receivedMessage').innerText = event.data;
        });
    </script>
</body>
</html>

2.使用 LocalStorage 或 SessionStorage（同源）

A页面

 localStorage.setItem('sharedData', 'Hello from Page A!');

B页面

localStorage.getItem('sharedData');

3.Broadcast Channel API（同源）

Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。

A页面中：

const channel = new BroadcastChannel('my-channel');
document.getElementById('sendMessageButton').addEventListener('click', function() {
     channel.postMessage('Hello from Page A!');
});

channel.onmessage = function(event) {
    console.log('Received message:', event.data);
};

B页面

const channel = new BroadcastChannel('my-channel');
channel.onmessage = function(event) {
   console.log('Received message:', event.data);
   document.getElementById('receivedMessage').innerText = event.data;
};

channel.postMessage('Hello from Page B!');