如何实现同页面多标签页打开时按钮点击状态实时同步

直接用浏览器原生的Broadcast Channel API就能实现同源多标签页的状态同步，不需要修改后端接口，改动量很小。
你原有代码里接口成功回调的判断行多打了一个无意义的数字6，会触发语法报错，修改的时候记得删掉。

核心实现逻辑 #

• 把按钮文本、颜色、全局状态变量的更新逻辑抽成独立公共函数，避免不同触发场景下重复写相同代码
• 创建一个所有同源页面共用的广播通道，打开同一页面的标签页会自动接入这个通道
• 当前标签页点击按钮、接口请求成功后，除了更新自身页面的按钮状态，同时向通道广播最新的LED状态值
• 每个标签页常驻监听通道的消息事件，收到其他标签页发来的状态更新时，直接调用公共函数更新当前页状态即可，不需要重复发起控制接口请求

修改后可直接运行的完整代码 #

<h3>Led 1:</h3>
<button id="button1" onclick="send1()">Turn ON</button>

<script>
var c = 1;
// 初始化跨标签页广播通道，自定义通道名即可，同域名下页面保持通道名一致
const ledSyncChannel = new BroadcastChannel('led_control_sync');

/**
 * 统一更新按钮状态的公共方法
 * @param {number} status LED状态 1=开 0=关
 */
function updateButtonStatus(status) {
  c = status;
  const btn = document.getElementById("button1");
  if (status === 1) {
    btn.innerHTML = "Turn ON";
    btn.style.backgroundColor = "red";
  } else {
    btn.innerHTML = "Turn OFF";
    btn.style.backgroundColor = "green";
  }
}

function send1() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      // 计算操作后的新状态
      const newStatus = c === 1 ? 0 : 1;
      // 更新当前标签页状态
      updateButtonStatus(newStatus);
      // 向其他所有打开的同页面标签页广播最新状态
      ledSyncChannel.postMessage(newStatus);
    }
  };
  xhttp.open("GET", "https://blynk.cloud/external/api/update?token=PiICxN5NNt2JWKLel25I********&v0=" + c, true);
  xhttp.send();
}

// 监听其他标签页发来的状态同步消息
ledSyncChannel.onmessage = function(e) {
  const remoteStatus = e.data;
  // 仅当收到的状态和当前页状态不一致时才更新，避免无效DOM操作
  if (remoteStatus !== c) {
    updateButtonStatus(remoteStatus);
  }
}
</script>

旧浏览器兼容方案 #

如果需要兼容不支持Broadcast Channel的老旧浏览器，可以换用localStorage事件实现相同效果：

• 本地状态更新成功后，把最新状态写入localStorage
• 页面监听window的storage事件，其他标签页修改localStorage时会自动触发该事件，拿到存储的最新状态后调用公共更新方法即可
  逻辑和上面的广播通道方案完全一致，只是通信介质换成了浏览器本地存储。

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