メインコンテンツへ飛ぶ

ウェブ埋め込み

概要​

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

iframe​

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

WebView​

info

We do not recommend you to use WebViews, as this tag undergoes dramatic architectural changes that may affect stability of your application. iframe や Electron の WebContentsView のような代替品や、設計の段階からコンテンツ埋め込みを避けるアーキテクチャへ切り替えるように検討してください。

WebViews are based on Chromium's WebViews and are not explicitly supported by 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 コンテンツに対して正確に配置するにはメインプロセスとレンダラープロセス間の調整が必要です。