網頁嵌入

概觀

如果您想在 Electron 的 BrowserWindow 中嵌入（第三方）網頁內容，您有三種選擇：<iframe> 標籤、<webview> 標籤和 WebContentsView。每種都提供略有不同的功能，並且在不同的情況下很有用。為了幫助您在這之間做出選擇，本指南說明了每個選項的差異和功能。

Iframes

Electron 中的 Iframes 行為與一般瀏覽器中的 Iframes 類似。您頁面中的 <iframe> 元素可以顯示外部網頁，前提是他們的內容安全策略允許。為了限制 <iframe> 標籤中網站的功能數量，建議使用sandbox 屬性，並僅允許您想要支援的功能。

WebViews

重要提示：我們不建議您使用 WebViews，因為此標籤正在進行劇烈的架構變更，可能會影響您應用程式的穩定性。請考慮切換到替代方案，例如 iframe 和 Electron 的 WebContentsView，或設計上避免嵌入內容的架構。

WebViews 基於 Chromium 的 WebViews，並未受到 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 對其內容提供了最大的控制權，因為它們以與 BrowserWindow 類似的方式實作 webContents。但是，由於 WebContentsView 不是 DOM 內部的元素，因此準確地相對於 DOM 內容定位它們需要主進程和渲染器進程之間的協調。