Web Embeds

概述

如果您想在 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 内容准确定位它们需要在主进程和渲染器进程之间进行协调。