Electron Web 嵌入

概覽

有三種方式可以讓你在Electron的BrowserWindow里集成（第三方）web內(nèi)容，<iframe> 和, <webview> 和 BrowserViews 每個(gè)功能都略有不同，適用于不同的情況。 為了幫助您在這些選擇之間進(jìn)行選擇，本指南將解釋他們之間的差異和功能。

Iframes

Iframe 在 Electron 中的行為與普通瀏覽器中類似。 在宿主頁(yè)面的 Content Security Policy 允許范圍內(nèi)，一個(gè) <iframe> 元素能在頁(yè)面上顯示外部網(wǎng)頁(yè)。 要限制 <iframe> 標(biāo)簽中站點(diǎn)的功能數(shù)量，建議 使用 sandbox 屬性 并且只允許您想要支持的功能。

WebView

重要提示： 我們不建議您使用 WebView，因?yàn)檫@個(gè)標(biāo)簽會(huì)發(fā)生劇烈的結(jié)構(gòu)變化，可能會(huì)影響您應(yīng)用程序的穩(wěn)定性。 考慮切換到其他選擇，如 ?iframe? 和Electron的 ?BrowserView?，或避免嵌入式內(nèi)容 設(shè)計(jì)的架構(gòu)。

?WebViews?基于 Chromium 的 WebView，不被 Electron 明確支持。 我們不能保證WebView API 在未來版本的 Electron 中仍然可用。 這就是為什么如果您想要使用<webview>標(biāo)簽，您需要在BrowserWindow 的 webPreferences 中設(shè)置 webviewTag 為 true。

WebView是一個(gè)自定義元素 (<webview>)，僅在 Electron 內(nèi)工作。 它們以 "進(jìn)程外 iframe" 實(shí)現(xiàn)。 這意味著所有與 <webview> 的通信都是異步使用 IPC 進(jìn)行的。 <webview>元素有許多自定義方法和事件，類似于webContents，使您能夠更多地控制內(nèi)容。

與 <iframe>，<webview> 相比往往稍慢，但在加載和與第三方內(nèi)容通信以及處理各種事件方面提供了更大的控制。

BrowserView

?BrowserViews? 不是 DOM 的一部分，而是由主進(jìn)程創(chuàng)建和控制。 它們只是現(xiàn)有窗口之上的另一層 Web 內(nèi)容。 這意味著它們與您自己的 BrowserWindow 內(nèi)容完全分離，并且它們的位置不受 DOM 或 CSS 的控制，而是通過在主進(jìn)程中設(shè)置邊界來控制其位置。 相反，它通過在主進(jìn)程中設(shè)置界面來控制 。

BrowserViews 提供對(duì)其內(nèi)容的最大控制，因?yàn)樗鼈儗?shí)現(xiàn) webContents 的方式與 BrowserWindow 實(shí)現(xiàn)內(nèi)容的方式類似。 但是，由于 BrowserViews 不是 DOM 的一部分，而是覆蓋在它們之上，因此您必須手動(dòng)管理它們的位置。