Web 嵌入

概述

如果您想在 Electron 的 BrowserWindow 中嵌入（第三方）Web 内容，您有三种可用选项：<iframe> 标签、<webview> 标签和 WebContentsView。每种选项都提供略微不同的功能，并且在不同的场景下很有用。为了帮助您在这些选项之间做出选择，本指南将解释每个选项的差异和功能。

Iframes

Electron 中的 Iframes 的行为与普通浏览器中的 iframes 相同。页面中的 <iframe> 元素可以显示外部网页，前提是其 内容安全策略允许。为了限制 <iframe> 标签中站点的功能数量，建议使用 sandbox 属性，并且只允许您希望支持的功能。

WebViews

信息

我们不建议您使用 WebViews，因为此标签正在经历可能影响您应用程序稳定性的重大架构性更改。请考虑改用其他替代方案，例如 iframe 和 Electron 的 WebContentsView，或者通过设计避免嵌入内容的应用架构。

WebViews 基于 Chromium 的 WebViews，并且未得到 Electron 的明确支持。我们不保证 WebView API 在 Electron 的未来版本中仍然可用。要使用 <webview> 标签，您需要在 BrowserWindow 的 webPreferences 中将 webviewTag 设置为 true。

WebView 是一个自定义元素 (<webview>)，仅在 Electron 中有效。它们被实现为“进程外 iframe”。这意味着所有与 <webview> 的通信都通过 IPC 异步完成。<webview> 元素具有许多自定义方法和事件，类似于 webContents，这为您提供了对内容更大的控制权。

与 <iframe> 相比，<webview> 的速度通常稍慢，但在加载和与第三方内容通信以及处理各种事件方面提供了更大的控制权。

WebContentsView

WebContentsView 不属于 DOM 的一部分，而是由您的主进程创建、控制、定位和调整大小。使用 WebContentsView，您可以在同一个 BaseWindow 中组合和叠加多个页面。

WebContentsView 对其内容提供最大的控制权，因为它们以类似于 BrowserWindow 的方式实现了 webContents。但是，由于 WebContentsView 不是 DOM 中的元素，因此相对于 DOM 内容精确地定位它们需要主进程和渲染进程之间的协调。