Sending/Receiving 消息给另一个 URL 或 VUE 中的 Tab

Sending/Receiving Message to Another URL or Tab in VUE

我在发送和接收消息的 VUE 中创建了一个简单的代码示例。代码示例在 CodeSandbox 上：https://codesandbox.io/s/wc1mc 并单击 Go To Board 生成一些随机 URL，例如 https://wc1mc.csb.app/board/100。我正在努力将消息发送到另一个浏览器选项卡。我的解决方案在同一个选项卡中工作，但不能跨选项卡工作。现在我想做什么：

在两个浏览器选项卡中打开此 URL https://wc1mc.csb.app/board/100
打开另一个 URL 例如。 https://wc1mc.csb.app/board/50 在第三个选项卡中
在选项卡 https://wc1mc.csb.app/board/100 中单击按钮 Update
以 100 结尾的两个选项卡都应显示 Received: 100，不应更新选项卡 50

我想使用邮件，因为将来发件人和收件人可能在不同的域中。感谢您的帮助。

广播频道 API 允许浏览上下文（即 windows、选项卡、框架或 iframe）和同一来源的工作人员之间进行基本通信。

https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

Sending/Receiving 消息给另一个 URL 或 VUE 中的 Tab

Sending/Receiving Message to Another URL or Tab in VUE

javascript

events

event-handling

vue.js

vuejs2