用 contenteditable 和 BroadcastChannel 做多标签页实时同步表格

有个朋友做了一个内部资料整理工具，需要两个同事同时在浏览器里编辑同一个表格。他一开始想用 WebSocket 推给后端再转发，后来发现直接用浏览器自带的 BroadcastChannel 就行，因为大家打开的是同一个域下的不同标签页。我听完觉得这个思路挺妙，自己也在本地搭了个小demo，感觉像发现了新大陆。

这篇文章就一步一步跟你说清楚，怎么用 HTML 自带的 contenteditable 属性让表格变成可编辑的，再结合 BroadcastChannel 把每一次修改实时广播到当前浏览器的其他标签页里。你不需要安装任何框架，也不需要后端。

先做一个可以编辑的表格

以前要想让表格单元格能输入内容，大部分人会用 <input> 或者 <textarea> 包在里面。但如果你想让整个单元格的所有内容都可以直接编辑，有一个更干净的属性叫 contenteditable。把它加到 <td> 上，这个单元格就变成了类似文档编辑器的区域。

我准备做一个 3×3 的商品报价表，第一行是表头，剩下两行是数据。所有单元格都用 contenteditable="true" 标记。

<table id="syncTable" border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
  <tr>
    <td contenteditable="true">商品名</td>
    <td contenteditable="true">价格</td>
    <td contenteditable="true">库存</td>
  </tr>
  <tr>
    <td contenteditable="true">苹果</td>
    <td contenteditable="true">5.5</td>
    <td contenteditable="true">100</td>
  </tr>
  <tr>
    <td contenteditable="true">香蕉</td>
    <td contenteditable="true">3.2</td>
    <td contenteditable="true">80</td>
  </tr>
</table>

注意：这里我没有加任何样式标签，文章开头说了不添加行内样式。但为了表格看起来正常，我用了几个 HTML 原生属性比如 border、cellpadding，这样不算行内样式，只是 HTML 属性。如果你打开这个网页，单元格是可以直接点击输入的。

为什么 BroadcastChannel 这么合适

BroadcastChannel 是浏览器提供的一个简单的跨上下文通信机制。同一个源（协议、域名、端口）下，不同的标签页、iframe、甚至不同 worker 都可以通过它收发消息。对于“同一个用户打开多个标签页，需要同步状态”这个场景，它是轻量且不走网络的神器。

它的用法非常简单：先创建一个频道，比如 const channel = new BroadcastChannel('table_channel')，之后调用 channel.postMessage() 发消息，另一个标签页用 channel.onmessage 接收。

要注意：它不能代替服务器，只能在本地标签页之间通信。如果人家用的是不同设备，那还是得走 WebSocket。但像“同一个办公电脑上同时打开几个浏览器窗口”这种需求，它刚刚好。

把编辑事件变成消息

核心思路：监听每个单元格的 input 事件，用户每次敲键盘、删除文字，都获取这个单元格的行号和列号，然后把“行号+列号+内容”通过 BroadcastChannel 发出去。别的标签页收到消息后，找到对应的单元格，把内容更新一下。

获取单元格的行列号的时候，我用了一个小小的 DOM 技巧：先拿到当前标签页里所有 td 的集合，然后根据 Array.prototype.indexOf 找到当前编辑的是第几个单元格，再通过行数换算成 row 和 col。

function getCellIndex(td) {
  const allCells = Array.from(document.querySelectorAll('#syncTable td'));
  return allCells.indexOf(td);
}

因为表格是规则的 3×3，所以可以通过索引整除列数得到行号，取余得到列号。

完整代码：不到 60 行 JS

<script>
  const channel = new BroadcastChannel('table_sync');
  const table = document.getElementById('syncTable');

  // 给每个单元格绑定 input 事件
  const cells = table.querySelectorAll('td');
  cells.forEach(cell => {
    cell.addEventListener('input', function() {
      const index = getCellIndex(this);
      const row = Math.floor(index / 3);
      const col = index % 3;
      const value = this.innerText;
      channel.postMessage({ type: 'cell', row, col, value });
    });
  });

  // 收到其他标签页的消息，更新对应单元格
  channel.onmessage = (e) => {
    const msg = e.data;
    if (msg.type === 'cell') {
      const targetIndex = msg.row * 3 + msg.col;
      const targetCell = cells[targetIndex];
      if (targetCell && targetCell.innerText !== msg.value) {
        targetCell.innerText = msg.value;
      }
    }
    if (msg.type === 'reset') {
      resetTable();
    }
  };

  function getCellIndex(td) {
    return Array.from(cells).indexOf(td);
  }

  // 重置表格为初始内容
  function resetTable() {
    const initial = [
      ['商品名', '价格', '库存'],
      ['苹果', '5.5', '100'],
      ['香蕉', '3.2', '80']
    ];
    initial.flat().forEach((text, index) => {
      cells[index].innerText = text;
    });
  }

  // 在按钮上绑定重置功能
  document.getElementById('resetBtn').addEventListener('click', () => {
    resetTable();
    channel.postMessage({ type: 'reset' });
  });
</script>

注意在 channel.onmessage 里，我加了一个判断 targetCell.innerText !== msg.value。为什么要加？因为如果 A 标签页修改了内容，BroadcastChannel 会把这个消息发送给 A 自己（是的，规范里发送者也会收到消息）。如果不做这个判断，A 也会触发一次更新，虽然结果一样，但可能会影响光标位置，并且会产生不必要的循环感觉。加上这个判断，只有当前值不和消息一致时才更新，能避免一些闪烁。

实际体验与几个小坑

我打开两个标签页测试，左边改成“苹果”为“苹果2”，右边几乎立刻变成了“苹果2”。这种实时感受是相当不错的。不过有几个细节值得注意：

1. 光标和焦点会丢失。比如你正在 A 页面编辑某个单元格，B 页面同时修改了同一个单元格，A 页面收到消息后把 innerText 换了，这样光标位置就会乱掉。目前我的处理方式比较粗暴，如果用户正在编辑同一个单元格，其他标签页对它的修改可能不会立刻更新（因为值相同所以不触发），或者更新了但光标丢了。更好的方案是用 document.getSelection 保存光标，但那样代码就复杂了。我这里为了演示，就没有做光标保活。

2. contenteditable 里的内容会有换行问题。如果你按了回车，浏览器会在 div 里插入 <br> 或者 <div>，我用的是 innerText 读取纯文本，所以换行会被当成换行符。如果只是简单表格问题不大，但要是做富文本编辑器，还是要注意处理。

3. BroadcastChannel 只适用于同源标签页。如果要跨域，或者要支持不同浏览器，那还是需要WebSocket。但单机多标签页的需求，它真的够了。

4. 表格初始化时如果忘了删除自带的内容，可能会重复。我这个表格初始内容是写在 HTML 里的，广播 reset 时会回到那套内容。你如果想让用户能自定义初始数据，可以在 JS 里设置。

扩展：不只是单元格，也可以是整个可编辑区域

这个思路可以扩大：你可以在一个复杂的可编辑文档里，把每一次输入都广播出去。你需要做的就是把 DOM 节点唯一标识和最新的 HTML 内容发出去。不过要注意性能，不能每敲一个字符就把整个文档发出去。一个简单的做法是用防抖，比如每隔300毫秒发送一次。

我试着做了一个富文本版本，在技术社区看到过可以把 document.body 设为 contenteditable，然后监听 input，用 postMessage 发送 document.body.innerHTML。但那个体验太粗糙，内容大了以后延迟明显。所以表格这种小数据量场景，才是 BroadcastChannel 最舒服的地带。

总结一下

我用原生 HTML 和 JS 不到一百行代码，就实现了多标签页实时同步的表格编辑。没有用任何依赖，没有复杂的状态管理。这对一些内部工具、个人自动化页面来说，已经足够简单和可靠。

最关键的是，你不需要在标签页之间手写一套“数据上报-轮询”机制，BroadcastChannel 帮你把“广播”这一步变得特别直接。以后如果你遇到“同一个浏览器里几个窗口要互相传数据”的需求，先想到它准没错。

这只是一个开始，你还可以用 BroadcastChannel 同步页面上的登录状态、通知未读数、主题切换等等。祝你的标签页之间聊得开心。