问题标签 [broadcast-channel]

我正在替换允许主应用程序页面触发与原始页面对话的无头窗口的服务器端解决方案。

现在我正在使用 SPFx 在 SPO 中执行此操作，到目前为止，我只使用了一个页面和 web 部件，其中包含一个无法退出发送页面的大对话框。

我的用户希望能够将对话框放在第二台显示器上，所以我认为我必须在不同的窗口/Web 部件中进行。我正在计划一个 2.0 版本并收集如何做的想法。

到目前为止，我认为我将使用“广播频道”在父页面/Web 部件和子页面/Web 部件之间进行通信。

我仍然需要弄清楚以下几点：

1. 如何创建仅包含 SPFx Web 部件的共享点页面，而没有所有侧面和顶部 bla bla。（可以安全地被 CSS 隐藏？）
2. 如何将 spfxContext 从父级传递给子级
3. 如何在构建解决方案时同时调试 2 个单独的 SPFx 项目。

欢迎任何建议。样品更多  

先感谢您。

我是 Electron 的新手，并且有一些代码可以创建一个新窗口。我想让窗口打开一个 BroadcastChannel 但我收到错误：

代码如下所示：

主要的.ts

渲染器.js

这适用于我的 Mac 笔记本电脑，但不适用于多台 Windows 开发机器？

最近，我在 Chrome 中使用 API BroadcastChannel 时遇到了一个奇怪的问题。我有一个需要来自其他选项卡的数据的选项卡，所以我使用 BroadcastChannel 来存档它。

当用户单击该按钮时，它将触发postMessage到正在侦听相同 BroadcastChannel 的目标选项卡

一切正常，直到它没有。在生产中，用户点击了很多按钮，点击几下（可能 10 次）后，Chrome 就冻结了（RAM 和 CPU 使用率高，我的应用程序也冻结了），我不得不杀死浏览器并重新启动它。

我通过将代码创建 BroadcastChannel 实例移动到函数外部来修复它，以便在第一次创建它，但我做了很多研究，仍然没有发现任何与创建很多相同的 BroadcastChannel 相关的东西会导致浏览器冻结

有谁知道 BroadcastChannel 是如何工作的并解释为什么会发生这种情况？

我有两个我的 Angular 应用程序实例在两个不同的选项卡中运行，我希望能够让用户通过按下网站上的按钮在它们之间切换。

我可以使用Broadcast Channel API在实例之间进行通信，但是window.focus()在非活动选项卡内调用不会做任何事情。由于消息是序列化/反序列化的，我也不能只通过通道发送窗口对象。

我还尝试通过在其中设置 window.name 然后调用活动选项卡来访问非活动选项卡的窗口实例window.open('', otherName)。这也不起作用，只会产生一个新的空选项卡。

解决方案必须适用于用户打开的应用程序的现有实例，我知道如果我只是从第一个实例中打开第二个实例（或 iframed 或类似的东西），这将起作用。我也知道这可以使用浏览器扩展来工作，但这也不适合我的用例。

如果这根本不可能，我只会在应用程序本身中构建“标签”，但我只是想我会先问，因为这种方式会更容易。

HTML5 BroadcastChannel API是在选项卡/窗口之间发送数据的绝佳解决方案。

它们通过调用函数打开new BroadcastChannel(name)和关闭。.close()

但是，它没有说明如何查看现有打开的广播频道。如果我动态创建 BroadcastChannels（不是使用固定的频道名称），查看当前打开的 BroadcastChannels 非常有用。

在Google 上搜索（“查看现有广播频道 javascript”）并查看前三个结果（1、2、3）都没有提供有关如何查看所有打开的广播频道的指示。

我试过查看BroadcastChannel界面，但它没有提供任何.listOpenedChannels()功能或任何类似的东西。

如何查看现有打开的广播频道？

我正在尝试在使用OpenWC工具创建的 WebComponent (Lit) 项目模板中使用BroadcastChannel库。

我可以使用安装包

我的代码：

但是，当我运行 webpack-dev-server 时，该项目被视为节点项目，并且出现错误，“未定义要求”。

如何让这个工作？

我正在寻找一种将数据发送到 React 应用程序内新打开的窗口的方法。在发送路由的组件内部，这是我当前调用的 onClick 函数：

这是“/testpage”路由上使用的组件内的代码：

控制台显示以下内容：

我曾尝试使用 BroadcastChannel API，但这似乎也不起作用。我错过了什么？为什么消息没有记录到控制台？

我正在研究一种与我正在加载到<iframe>我的角度应用程序中的组件进行通信的方法。我正在使用BroadcastChannelapi 来执行此操作，虽然我没有收到任何错误，但我在 iframe 中加载的组件中没有收到任何消息。我创建了一个用于发送看起来像这样的数据的服务。

然后在我的组件内部我这样做

<iframe>我为在我执行此操作的地方呈现的组件制作了另一个服务文件

我正在加载的组件在我的<iframe>中注册为一个route，我AppRouting.module像这样导航到它

在我的模板中，我只是添加[src]="URL"到<iframe>加载没有问题的标签中。

我可以从console.log()发送帖子的服务中看到，订阅按预期从状态发送更新，但是console.log()方法.onmessage永远不会触发。有谁看到到目前为止的问题是什么？

我BroadcastChannel用来远程控制投影仪上显示的另一个浏览器窗口（在同一台 PC 上）中显示的内容。（基本上，投影窗口是一个扩展的桌面显示。）到目前为止，它在 Chrome 和 Edge 上都运行良好，在远程控制页面和受控页面中各有一个简短的 JS 脚本。

但是，投影的浏览器内容位于三个不同的选项卡中。目前，我必须将焦点切换到该投影窗口并巧妙地使用 Ctrl-Tab 来让我想要控制的选项卡成为活动选项卡。

如何以编程方式选择要激活的选项卡？如果没有通用方法，我很乐意为 Chrome 或 Edge 提供解决方案。

我有一个严格的要求，只允许登录用户在一个选项卡中打开我的网络应用程序。我注意到 WhatsApp 和 Google Messenger 的网络应用程序已经实现了这一点。例如，尝试在多个选项卡中打开这些应用程序（无论是在同一浏览器、不同浏览器甚至不同设备上）都会导致以下警告：

有谁知道这是怎么做到的？服务器和客户端之间必须进行某种同步，以确保只打开一个选项卡。但这需要一个唯一的选项卡标识符，而可靠地构建它会变得相当复杂。有人知道 WhatsApp 和 Google Messenger 是如何做到的吗？他们的技术似乎完美无缺。