电子 - 如何复制浏览器窗口？答案

【问题标题】：Electron - How to duplicate a BrowserWindow?电子 - 如何复制浏览器窗口？
【发布时间】：2021-01-24 01:30:15
【问题描述】：

我正在尝试让动态窗口系统在我的应用程序中运行。当您打开两个浏览器并希望通过拖放将一个选项卡移动到另一个 chrome 实例时，这与 Google Chrome 所做的非常相似。

我大概可以监听拖动事件以获取选项卡的 DOM 引用，在我的前端应用程序中复制其状态/路由，将其传递给辅助 BrowserWindow，然后将选项卡实例重新创建到另一个 BrowserWindow。但我将放弃对第一个选项卡的当前修改。在 chrome 中，当您移动选项卡时，您不会丢失选项卡中加载的内容。

我真的找不到一种方法来复制 BrowserWindow 的内容、共享/移动 DOM 的内容而不丢失其状态，或者我的选项卡实例有一些繁重的构造逻辑来防止丢失任何东西。

如果你对我如何实现这样的事情有一个方向，我有点迷茫。谢谢。

【问题讨论】：

有趣的问题，我不知道electron-tabs是否支持这个，但它可能值得一试。
@Joshua 这是一个不错的软件包建议，但经过一些研究，它目前不支持重复选项卡（打开了一个问题，软件包的创建者在 2019 年 4 月表示他们最终会处理此功能）。我想我会稍微阅读他们的源代码来尝试构建我自己的解决方案。谢谢你的帮助:)

标签： electron

【解决方案1】：

我终于找到了实现这一目标的方法。

一个 BrowserWindow 可以附加一个 BrowserView。

因此，当我创建 BrowserWindow 时，我会传递一个额外的参数，如下所示：

var win = new BrowserWindow({
   webPreferences:{
      additionalArguments: ['mainbrowserwindow']
   }
})

//Then I load my index.html file for this BrowserWindow
win.loadFile('/path/to/index.html');

这将告诉我的前端这个实例是由“主窗口”视图生成的。这样我就可以为我的应用程序的每个部分使用一个 index.html 文件。我只需要基于这个额外参数的一点路由。

之后，我创建了一个新的 BrowserView，我向它传递了另一个附加参数，告诉它加载我的应用程序的特定页面（比如说一个用户信息选项卡）

var view = new BrowserView({
   webPreferences: {
      additionalArguments:['page=userinfo']
   }
})

//Then I load the same index.html for this view
view.loadFile('/path/to/index.html')

我终于把我的 BrowserView 添加到了我的 BrowserWindow

win.setBrowserView(view)

在我的前端，路由“mainbrowserwindow”只会生成我的应用程序的选项卡。 'userinfo' 路由是选项卡的内容。

现在我可以创建另一个 BrowserWindow，并使用相同的命令将其填充到 'userinfo' 视图中。

win2.setBrowserView(view)

这会将第一个用户信息页面移动到另一个浏览器窗口，而不会丢失内存中的数据。

理论上这应该可行。但显然还有很多工作要做（IPC 通信以同步多个 BrowserWindow 之间的选项卡，确保不能存在空选项卡，完全销毁选项卡以避免内存泄漏）。而且，当然，应用程序会在内存中渲染并保存很多页面，我认为不可能在文件中序列化 BrowserView。

【讨论】：