跨页面进行数据通讯
- 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!');
