在 VUE 中发送/接收消息到另一个 URL 或选项卡

编程问答 2022-05-28

问题描述

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

  1. 在两个浏览器标签中打开此 URL https://wc1mc.csb.app/board/100
  2. 打开另一个 URL，例如。 https://wc1mc.csb.app/board/50 在第三个标签中
  3. 在标签 https://wc1mc.csb.app/board/100 点击按钮 Update
  4. 以 100 结尾的两个标签都应该显示 Received: 100，标签 50 不应更新

我想使用消息，因为将来发送方和接收方可能位于不同的域中。感谢您的帮助。

解决方法

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

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

event-handlingeventseventseventsjavascriptvue.js