Web 嵌入
概览
有三个选项可以让您在 Electron 的 BrowserWindow 里嵌入(第三方)Web 内容:<iframe> 标签、<webview> 标签、WebContentsView 。 每个功能都略有不同,适用于不同的情况。 为了帮助您在这些选择之间进行选择,本指南将解释他们之间的差异和功能。
Iframes
Iframe 在 Electron 中的行为与普通浏览器中类似。 在宿主页面的 Content Security Policy 允许范围内,一个 <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 提供对其内容的最大化控制,因为它们实现 webContents 的方式与 BrowserWindow 相似。 然而,正因为 WebContentsView 不是 DOM 里的元素,相对 DOM 内容精确地定位它们需要主进程和渲染进程之间协调工作。