Web 嵌入
概述
如果您想在 Electron 的 BrowserWindow
中嵌入(第三方)网页内容,您有三种选择:<iframe>
标签、<webview>
标签和 WebContentsView
。每一种都提供略有不同的功能,并在不同的情况下非常有用。为了帮助您在这些选项之间进行选择,本指南将解释每种选项的差异和功能。
Iframe
Electron 中的 Iframe 的行为与普通浏览器中的 iframe 类似。页面中的 <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 内容精确地定位它们需要主进程和渲染进程之间的协调。