Web 嵌入¶

概述¶

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

Iframes¶

Electron 中的 iframe 行为与普通浏览器中的 iframe 类似。页面中的 <iframe> 元素可以显示外部网页，前提是它们的 内容安全策略 允许这样做。若要限制 <iframe> 标签中站点的能力数量， 建议使用 sandbox 属性 ，并且只允许你希望支持的能力。

WebViews¶

[!IMPORTANT] 我们不建议使用 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 内容准确定位它们，需要在主进程和渲染进程之间进行协调。