在现代 Web 应用程序开发中，往往需要实现不同页面之间的信息传递，甚至需要在不同的浏览器窗口或标签页之间进行通信。常见的、容易理解的方法是使用 cookies 或者 localStorage，但是这些方法存在一些缺陷。本文将介绍两个更加高级和强大的技术，它们分别是跨文档消息传递和 HTML5 Server-Sent Events。
跨文档消息传递
跨文档消息传递（Cross-document Messaging）是一种能够让不同文档之间相互发送信息并保持通信的机制。它能够在不同域名、端口号或者协议的情况下实现通信，在一些复杂的应用程序或者需要互相协作的应用程序之间非常有用。
跨文档消息传递的基本原理是由一个窗口调用另一个窗口的 postMessage() 方法，该方法传递一条消息。接收方可以通过监听 message 事件来接收消息并做出响应。以下是一个简单的示例，如何在两个文档之间传递消息。
HTML 页面一：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Post Message Example 1</title>
</head>
<body>
<h1>This is Page 1.</h1>
<button id="send">Send message to Page 2</button>
<script>
const otherWindow = window.opener || window.parent;
document.querySelector('#send').addEventListener('click', () => {
otherWindow.postMessage('Hello from Page 1!', '*');
});
window.addEventListener('message', event => {
if (event.origin !== 'https://example.com') return;
console.log('Page 1 received message:', event.data);
});
</script>
</body>
</html>HTML 页面二：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Post Message Example 2</title>
</head>
<body>
<h1>This is Page 2.</h1>
<script>
window.addEventListener('message', event => {
if (event.origin !== 'https://example.com') return;
console.log('Page 2 received message:', event.data);
event.source.postMessage('Hello from Page 2!', event.origin);
});
</script>
</body>
</html>在这个示例中，当用户单击页面一的按钮时，它将向页面二发送一条消息。页面二通过响应 message 事件来接收这条消息，并向页面一发送一条回复消息。
需要注意的是，在实际使用中，应该更加仔细地限制消息的来源和目标，以确保安全性。
HTML5 Server-Sent Events
HTML5 Server-Sent Events 是一种在 Web 浏览器和 Web 服务器之间进行实时单向通信的技术。其最大的优点是建立 Web 服务器向客户端推送数据的能力，不再需要客户端异步地定时向服务器进行轮询，可以方便地实现实时更新和实时通知。
使用 HTML5 Server-Sent Events，需要在服务器端建立事件源（EventSource），客户端通过浏览器 API 向事件源连接，事件源服务器可以实时向客户端推送数据。以下是一个服务器端向客户端推送时间和日期信息的示例：
服务器端：
// www.javascriptcn.com code example
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');
while (true) {
echo "data: The current time is " . date('H:i:s') . "\n\n"; // 发送时间数据
flush(); // 立即输出数据到浏览器
sleep(1); // 暂停一秒钟
}
?>客户端：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SSE Example</title>
</head>
<body>
<h1>The current time is <span id="time"></span>.</h1>
<script>
const eventSource = new EventSource('/example/sse.php');
// 接收服务器端推送的数据
eventSource.addEventListener('message', event => {
console.log('Received message:', event.data);
document.querySelector('#time').textContent = event.data;
});
</script>
</body>
</html>客户端通过 EventSource() 构造函数创建一个事件源对象，然后通过监听 message 事件接收服务器端推送的数据。在这个示例中，服务器端每秒钟发送一次时间信息，客户端实时显示在页面上。
需要注意的是，HTML5 Server-Sent Events 的兼容性在浏览器之间存在差异。但是，相比 WebSockets，它是一种更加简单和易于使用的实时通信技术。
结语
跨文档消息传递和 HTML5 Server-Sent Events 都是很强大的 Web 技术，它们在现代 Web 应用程序开发中非常有用。本文通过从原理到示例的深入介绍，希望能够让读者对它们有更深入的了解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6b09da941bf7134c82386