Skip to main content

Web Embeds网络嵌入

Overview概述​

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 BrowserViews. 如果要在ElectronBrowserWindow中嵌入（第三方）web内容，有三个选项可用：<iframe>标记、<webview>标记和BrowserViews。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​

Iframes in Electron behave like iframes in regular browsers. Electron中的iframe的行为类似于常规浏览器中的ifrome。An <iframe> element in your page can show external web pages, provided that their Content Security Policy allows it. 页面中的<iframe>元素可以显示外部网页，只要其内容安全策略允许。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.要限制<iframe>标记中站点的功能数量，建议使用sandbox属性，只允许您想要支持的功能。

WebViews​

Important Note: we do not recommend you to use WebViews, as this tag undergoes dramatic architectural changes that may affect stability of your application. 重要提示：我们不建议您使用WebViews，因为此标记经历了可能影响应用程序稳定性的重大架构更改。Consider switching to alternatives, like iframe and Electron's BrowserView, or an architecture that avoids embedded content by design.考虑切换到替代方案，如iframe和Electron的BrowserView，或通过设计避免嵌入内容的架构。

WebViews are based on Chromium's WebViews and are not explicitly supported by Electron. 基于Chromium的网络视图，Electron不明确支持。We do not guarantee that the WebView API will remain available in future versions of Electron. 我们不保证WebView API在未来版本的Electron中仍然可用。To use <webview> tags, you will need to set webviewTag to true in the webPreferences of your BrowserWindow.要使用<webview>标记，您需要在浏览器窗口的webPreferences中将webviewTag设置为true。

WebView is a custom element (<webview>) that will only work inside Electron. WebView是一个自定义元素（<webview>），只在Electron内部工作。They are implemented as an "out-of-process iframe". 它们被实现为“进程外iframe”。This means that all communication with the <webview> is done asynchronously using IPC. 这意味着与<webview>的所有通信都是使用IPC异步完成的。The <webview> element has many custom methods and events, similar to webContents, that provide you with greater control over the content.<webview>元素有许多自定义方法和事件，类似于webContents，它们为您提供了对内容的更大控制。

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.与<iframe>相比，<webview>的速度稍慢，但在加载和与第三方内容通信以及处理各种事件方面提供了更大的控制。

BrowserViews​

BrowserViews are not a part of the DOM - instead, they are created in and controlled by your Main process. 不是DOM的一部分，而是在主进程中创建并由主进程控制。They are simply another layer of web content on top of your existing window. 它们只是现有窗口之上的另一层web内容。This means that they are completely separate from your own BrowserWindow content and their position is not controlled by the DOM or CSS. 这意味着它们完全独立于您自己的BrowserWindow内容，它们的位置不受DOM或CSS控制。Instead, it is controlled by setting the bounds in the Main process.相反，它是通过在主进程中设置边界来控制的。

BrowserViews offer the greatest control over their contents, since they implement the webContents similarly to how the BrowserWindow does it. 提供对其内容的最大控制，因为它们实现webContents的方式与BrowserWindow类似。However, as BrowserViews are not a part of your DOM, but are rather overlaid on top of them, you will have to manage their position manually.然而，由于BrowserViews不是DOM的一部分，而是覆盖在它们之上，因此您必须手动管理它们的位置。