メインコンテンツへ飛ぶ

ウェブ埋め込み

概要​

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

iframe​

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

WebView​

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

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

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

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

WebContentsView​

WebContentsView は DOM の一部ではなく、メインプロセスによって作成、制御、配置、サイズ設定されます。 WebContentsView を使用すると、同じ BaseWindow 内で複数のページを組み合わせてレイヤー化できます。

WebContentsView は BrowserWindow と同様に webContents を実装しているため、そのコンテンツを最も細かく制御できます。 ただし、WebContentsView は DOM 内の要素ではないため、DOM コンテンツに対して正確に配置するにはメインプロセスとレンダラープロセス間の調整が必要です。