Web 嵌入

概述

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

Iframes

Electron 中的 Iframes 行为与常规浏览器中的 Iframes 相同。页面中的 <iframe> 元素可以显示外部网页，前提是这些网页的 内容安全策略 (CSP) 允许这样做。为了限制 <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 内容准确地定位它们需要主进程和渲染器进程之间的协调。