Electron 中的 BrowserWindow 和 <Webview> Tag 有什么区别？什么时候建议使用它们？

Question

以下是电子文档特定部分的链接：

浏览器窗口

网页视图标签

（编辑） 我正在考虑的用例是，例如，如果我想构建一个浏览器，选项卡中的每个网页是否都是 Webview 或 BrowserWindow 的实例？或者例如，如果我想构建一个编程编辑器，并且我想在代码旁边显示渲染的 HTML 页面，那是一个新的 BrowserWindow 还是 Webview？

Answer 1

我可以理解为什么考虑到它们的相似之处，在其中托管您的内容会令人困惑。它们都在不同的进程中启动，并具有许多相似的配置。 BrowserWindow 和 webview 之间的主要区别在于，BrowserWindow 是平台上的 window，而 webview 是网页上的 element 这可能是一个明显的、肤浅的区别，但很多它们的差异和用法都源于它。

Web 视图存在的大部分原因是允许将不受信任的内容嵌入到您的应用程序中。如果您阅读了 webview 的用例，其中很多都指出了这样一个事实：默认情况下，BrowserWindow 可以完全访问 Node API。在其中托管不受信任的内容会导致该内容对您的系统进行重大访问，并会带来安全问题。然而，webview 默认情况下没有打开 Node 集成，因此它可以保护您的应用程序和平台免受托管内容的影响。

但是，这种区别有点转移注意力，因为节点集成可以在 BrowserWindow 上禁用，而可以在 webview 元素上启用。也就是说，您应该能够通过取消对 Node 的访问来在 BrowserWindow 中安全地托管不受信任的内容，并在 webview 中托管受信任的内容并为其提供对 Node 的访问权限。

Web 视图的关键在于它允许在应用程序的网页/视图上嵌入不受信任的内容。如果在同一视图/页面中，您希望拥有一些受信任且可以完全访问 Node API 的内容，以及一些不受信任且对 Node API 的访问权限有限或无法访问的内容，那么这只能通过 webview 元素来实现。这是一种隔离和锁定浏览器窗口中托管的网页的一部分，同时允许打开其余部分的方法。

除了嵌入不受信任的内容之外，我能想到的在 BrowserWindows 上使用 webview 的唯一情况是，如果您想在单个窗口中打开和查看多个单独的进程。应用程序可以选择为 10 个不同的进程创建 10 个不同的窗口，并让平台处理布局、焦点等，也可以为 10 个不同的进程打开具有 10 个 Web 视图的 1 个窗口，并在该窗口内自行处理布局、焦点等。

（编辑）要编辑问题：

对于这两种情况，我建议使用网络视图。

在第一个场景中，浏览器，您提到了“选项卡”。据我所知，没有简单的跨平台方法可以使用多个 BrowserWindows 构建选项卡式应用程序，因为窗口是由本机操作系统创建的。但是，您可以通过在单个网页中创建选项卡式应用程序来实现此目的，每个选项卡都包含一个 Web 视图。在这种情况下，您需要确保在 Web 视图上禁用 Node 集成（默认情况下应该如此），因为从 Web 加载内容通常是不可信的。

第二种情况，即带有渲染 HTML 的编辑器，并不那么明确。您可以使用 webview、iframe 或将内容直接渲染到 div。对于 Markdown 或 HTML 小片段之类的内容，直接渲染到 div 可能是最佳选择，只要您不需要自定义 css 或想要执行 JavaScript。否则使用 webview 或 iframe 是有意义的。区别在于 webview 在单独的进程中启动，并且可能具有 Node 集成或灵活的安全性，而 iframe 则在与 BrowserWindow 相同的进程中加载，并且我认为已经锁定了安全性。无论如何，要在没有另一个窗口的情况下获得并排外观，您需要使用像 webview 这样的 HTML 元素，而不是 BrowserWindow。

Answer 2

Electron 5 建议使用 browserview/iframe 而不是 webview。
https://electronjs.org/docs/api/webview-tag

Answer 3

Electron 31 支持 MacOS 的选项卡式窗口： https://www. Electronjs.org/docs/latest/api/browser-window#winaddtabbedwindowbrowserwindow-macos

我们可以与setWindowOpenHandler结合使用 https://www. Electronjs.org/docs/latest/api/web-contents#contentssetwindowopenhandlerhandler

示例：

mainWindow.webContents.setWindowOpenHandler(() => {
return {
  action: 'allow',
  createWindow: (options) => {
    const browserWindow = new BrowserWindow(options);
    mainWindow.addTabbedWindow(browserWindow);
    browserWindow.setBounds({ x: 0, y: 0, width: 640, height: 480 });
    return browserWindow.webContents;
  },
};

});