メインコンテンツへ飛ぶ

ウェブ埋め込み

概要​

Electron の BrowserWindow に (サードパーティ) ウェブコンテンツを埋め込みたい場合は、<iframe> タグ、<webview> タグ、 BrowserView の 3 つの選択肢があります。 それぞれ多少の異なる機能を提供しており、さまざまな状況で役立ちます。 これらの選択を支援するため、このガイドではそれぞれの選択肢の違いと機能について説明します。

iframe​

Electron の iframe は一般的なブラウザの iframe のように動作します。 コンテンツセキュリティポリシー で許可されている場合、ページの <iframe> 要素に外部ウェブページを表示できます。 <iframe> タグ内のサイト機能を制限するために、sandbox 属性 を使用してサポートしたい機能のみを許可することを推奨します。

WebView​

重要な注意: WebView タグはアプリケーションの安定性に影響を与えうる劇的なアーキテクチャ変更を受けているため、これの利用は非推奨です。 iframe や Electron の BrowserView のような代替品や、設計の段階からコンテンツ埋め込みを避けるアーキテクチャへ切り替えるように検討してください。

WebView は Chromium の WebView が基ですが、Electron は明示的にサポートしていません。 将来の Electron のバージョンでも WebView API が利用できる保証はありません。 <webview> タグを使用する場合、BrowserWindow の webPreferences に内で webviewTag を true に設定する必要があります。

WebView は、Electron 内でのみ機能するカスタム要素 (<webview>) です。 これは "プロセス外 iframe" として実装されています。 つまり、<webview> とのすべての通信は IPC を用いて非同期的に行われます。 <webview> 要素には、webContents と同様に多くのカスタムメソッドとイベントがあり、コンテンツのより広い制御を提供します。

<iframe> と比較して <webview> はやや遅い傾向がありますが、サードパーティコンテンツのロード、通信など、さまざまなイベントの処理をより広く制御できます。

WebContentsView​

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.

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.