如何通过JavaScript实现两个HTML标签页之间的通信？

嘿，我来帮你搞定两个同源标签页之间的通信问题！下面给你两种实用方案，都能实现点击第一个页面按钮后，调用第二个页面的Test函数执行操作：

方法一：Broadcast Channel API（推荐，专为跨标签通信设计） #

这个HTML5新增的API就是专门用来处理同源上下文（标签页、iframe等）之间的消息传递，用法直白且高效。

第二个页面（接收消息并执行函数） #

先在第二个页面里创建广播频道，监听指定消息，收到后触发Test函数：

<!DOCTYPE html>
<html>
<head>
<script>
// 创建一个名为"tabCommunication"的广播频道
const channel = new BroadcastChannel('tabCommunication');

// 监听消息，收到指定指令时执行Test
channel.onmessage = function(e) {
  if (e.data === 'runTest') {
    Test();
  }
};

function Test() {
  document.getElementById('test').innerHTML = "Test";
}
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>

第一个页面（触发按钮发送指令） #

在第一个页面的按钮点击事件里，向同一个广播频道发送触发指令：

<!DOCTYPE html>
<html>
<head>
<script>
const channel = new BroadcastChannel('tabCommunication');

function triggerTest() {
  // 发送消息通知第二个页面执行Test函数
  channel.postMessage('runTest');
}
</script>
</head>
<body>
<button onclick="triggerTest()">Click here</button>
</body>
</html>

方法二：localStorage 存储事件（兼容老浏览器） #

如果需要兼容一些较旧的浏览器，可以利用localStorage的特性：当一个标签页修改localStorage数据时，其他同源标签页会触发storage事件。

第二个页面（监听存储事件） #

<!DOCTYPE html>
<html>
<head>
<script>
// 监听storage事件
window.addEventListener('storage', function(e) {
  // 检测到指定key的变化时，执行Test函数
  if (e.key === 'callTest' && e.newValue === 'trigger') {
    Test();
    // 重置值避免重复触发
    localStorage.removeItem('callTest');
  }
});

function Test() {
  document.getElementById('test').innerHTML = "Test";
}
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>

第一个页面（修改storage触发事件） #

<!DOCTYPE html>
<html>
<head>
<script>
function triggerTest() {
  // 修改localStorage的值，触发其他标签页的storage事件
  localStorage.setItem('callTest', 'trigger');
}
</script>
</head>
<body>
<button onclick="triggerTest()">Click here</button>
</body>
</html>

关键注意点 #

• 两种方案都要求两个页面是同源的（同一域名、协议、端口），浏览器的同源策略会阻止跨域标签页的通信。
• Broadcast Channel API的兼容性稍逊于localStorage，但现代主流浏览器都已支持，优先推荐这个更专业的方案。

内容的提问来源于stack exchange，提问作者user9585957