Electron.js指南——Web嵌入Electron

Web嵌入Electron

如果要将Web内容（第三方）嵌入到Electron中BrowserWindow，则可以使用三个选项：<iframe>标签，<webview>标签和BrowserViews。每个选项提供的功能略有不同，在不同情况下很有用。为了帮助您在这两者之间进行选择，本指南将说明两者的区别和功能。

iframe

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

 

WebViews

 

WebView基于Chromium的WebView，Electron没有明确支持。我们不保证WebView API在Electron的将来版本中仍然可用。这就是为什么，如果你想使用<webview>标签，您需要设置webviewTag到true在BrowserWindow的webPreferences。

WebView是一个自定义元素（<webview>），仅在Electron内部起作用。它们被实现为“进程外iframe”。这意味着与的所有通信<webview>都是使用IPC异步完成的。该<webview>元素有很多自定义方法和事件，类似webContents，允许您在内容更多的控制。

与相比<iframe>，<webview>往往会稍微慢一些，但在加载和与第三方内容通信以及处理各种事件方面提供了更大的控制权。

 

BrowserViews

 

BrowserView不是DOM的一部分-相反，它们是在您的主流程中创建并由其控制的。它们只是现有窗口顶部的另一层Web内容。这意味着它们与您自己的BrowserWindow内容完全分开，并且它们的位置不受DOM或CSS的控制，而是通过在主过程中设置界限来控制的。

BrowserViews提供了对其内容的最大控制，因为它们的实现webContents方式与实现方式相似BrowserWindow。但是，它们不是您DOM的一部分，而是覆盖在它们之上，这意味着您将必须手动管理它们的位置。