Skip to main content

网络嵌入

网络嵌入

¥Web Embeds

概述​

¥Overview

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

¥If you want to embed (third-party) web content in an Electron BrowserWindow, there are three options available to you: <iframe> tags, <webview> tags, and WebContentsView. Each one offers slightly different functionality and is useful in different situations. To help you choose between these, this guide explains the differences and capabilities of each option.

Iframes​

Electron 中的 iframe 的行为类似于常规浏览器中的 iframe。页面中的 <iframe> 元素可以显示外部网页，前提是它们的 内容安全政策 允许。要限制 <iframe> 标记中站点的功能数量，建议使用 sandbox 属性 并且仅允许你想要支持的功能。

¥Iframes in Electron behave like iframes in regular browsers. An <iframe> element in your page can show external web pages, provided that their Content Security Policy allows it. To limit the number of capabilities of a site in an <iframe> tag, it is recommended to use the sandbox attribute and only allow the capabilities you want to support.

WebViews​

重要的提示：我们不建议你使用 WebViews，因为此标签经历了巨大的架构变化，可能会影响应用的稳定性。考虑切换到替代方案，例如 iframe 和 Electron 的 BrowserView，或者通过设计避免嵌入内容的架构。

¥Important Note: we do not recommend you to use WebViews, as this tag undergoes dramatic architectural changes that may affect stability of your application. Consider switching to alternatives, like iframe and Electron's BrowserView, or an architecture that avoids embedded content by design.

WebViews 基于 Chromium 的 WebView，并且不受 Electron 明确支持。我们不保证 WebView API 在 Electron 的未来版本中仍然可用。要使用 <webview> 标签，你需要在 BrowserWindow 的 webPreferences 中将 webviewTag 设置为 true。

¥WebViews are based on Chromium's WebViews and are not explicitly supported by Electron. We do not guarantee that the WebView API will remain available in future versions of Electron. To use <webview> tags, you will need to set webviewTag to true in the webPreferences of your BrowserWindow.

WebView 是一个自定义元素 (<webview>)，只能在 Electron 中使用。它们作为 "进程外 iframe" 实现。这意味着与 <webview> 的所有通信都是使用 IPC 异步完成的。<webview> 元素具有许多自定义方法和事件，与 webContents 类似，可让你更好地控制内容。

¥WebView is a custom element (<webview>) that will only work inside Electron. They are implemented as an "out-of-process iframe". This means that all communication with the <webview> is done asynchronously using IPC. The <webview> element has many custom methods and events, similar to webContents, that provide you with greater control over the content.

与 <iframe> 相比，<webview> 的速度稍慢，但在加载第三方内容、与第三方内容通信以及处理各种事件方面提供了更好的控制。

¥Compared to an <iframe>, <webview> tends to be slightly slower but offers much greater control in loading and communicating with the third-party content and handling various events.

WebContentsView​

WebContentsView 不是 DOM 的一部分，相反，它们是由主进程创建、控制、定位和调整大小的。使用 WebContentsView，你可以将许多页面组合并分层到同一个 BaseWindow 中。

¥WebContentsViews are not a part of the DOM—instead, they are created, controlled, positioned, and sized by your Main process. Using WebContentsView, you can combine and layer many pages together in the same BaseWindow.

WebContentsView 对其内容提供了最大的控制，因为他们实现 webContents 的方式与 BrowserWindow 的实现方式类似。然而，由于 WebContentsView 不是 DOM 内部的元素，因此根据 DOM 内容准确定位它们需要主进程和渲染进程之间的协调。

¥WebContentsViews offer the greatest control over their contents, since they implement the webContents similarly to how BrowserWindow does it. However, as WebContentsViews are not elements inside the DOM, positioning them accurately with respect to DOM content requires coordination between the Main and Renderer processes.