Web 嵌入

概览

如果你想在 Electron BrowserWindow 中嵌入（第三方）Web 内容，你有三个选项可用：<iframe> 标签、<webview> 标签和 WebContentsView。每种选项提供的功能略有不同，适用于不同的情况。为了帮助你做出选择，本指南解释了每种选项的差异和能力。

Iframes

Electron 中的 Iframes 的行为与普通浏览器中的 iframes 类似。页面中的 <iframe> 元素可以显示外部网页，前提是其内容安全策略 (Content Security Policy) 允许。为了限制 <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 对其内容提供最大的控制权，因为它们实现 webContents 的方式类似于 BrowserWindow。然而，由于 WebContentsView 不是 DOM 中的元素，要相对于 DOM 内容准确定位它们，需要在主进程和渲染进程之间进行协调。