网页嵌入

概述

如果您想在 Electron 的 BrowserWindow 中嵌入（第三方）网页内容，您可以选择三种方式：<iframe> 标签、<webview> 标签和 WebContentsView。每种方式的功能略有不同，适用于不同的场景。为了帮助您选择，本指南将解释每种选项的差异和功能。

Iframe

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

WebView

重要提示：我们不建议您使用 WebView，因为此标签正在经历重大的架构更改，这可能会影响应用程序的稳定性。请考虑切换到其他方案，例如 iframe 和 Electron 的 WebContentsView，或一种通过设计避免嵌入内容的架构。

WebView 基于 Chromium 的 WebView，并且 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 内容对其进行精确定位需要主进程和渲染进程之间的协调。