1

我正在测试BroadcastChannel功能，但遇到了麻烦。我打开两个 Chrome 窗口和每个窗口的开发工具。在控制台上我写：

const z = new BroadcastChannel('blarg')
z.onmessage = function (ev) {console.log(ev)}

我可以检查 z 并且它具有保存到 onmessage 道具的功能，所以一切看起来都很好。但是，当我测试时：

z.postMessage('sweet')

在其中一个控制台中，另一个控制台中没有任何显示。我希望由于两个 Chrome 窗口都订阅了广播频道blarg并且具有控制台记录发布的消息的功能，我会看到消息sweet显示在另一个控制台中，但没有任何反应。

所以两个问题：

我不能BroadcastChannel像这样在 devtools 控制台中测试界面吗？

如果是这样，我对 BroadcastChannel 的工作方式有何遗漏？

4

1 回答 1

1

它在以下情况下有效：

  1. 通信发生在同一来源
  2. 两端的频道名称相同（blarg在您的情况下，但也可能是""）
  3. 如果您是发件人，您不会期望收到邮件

当你说

我打开两个 chrome 窗口和每个窗口的开发工具。

打电话给他们A和B。在命名法中A，B它们被定义为“浏览上下文”，它们也可以是选项卡、框架或 iframe。

以下代码是满足条件 1. 和 2 的示例。

开发工具A：

location.href = 'https://example.com'
z = new BroadcastChannel('blarg')
z.onmessage = (ev) => { console.log(ev) }

开发工具B：

location.href = 'https://example.com'
z = new BroadcastChannel('blarg')
z.onmessage = (ev) => { console.log(ev) }

当浏览器上下文（窗口、选项卡、框架或 iframe）不“指向”任何常规 url（例如，当您按 CTRL+T 打开新选项卡时）时，也满足条件 1。在这种情况下，原点具有特殊值chrome://new-tab-page。

说，如果您从Ato发帖B，B将收到该消息和console.log它。反之亦然。

于 2021-01-29T08:41:41.430 回答