时间戳

首页 > 解决方案 > 在 VUE 中向另一个 URL 或选项卡发送/接收消息

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

问题描述

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

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

我想使用消息，因为将来发送者和接收者可能在不同的域中。谢谢你的帮助。

标签： javascriptvue.jseventsvuejs2event-handling

解决方案

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

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

推荐阅读