メインコンテンツへスキップ

ウェブ埋め込み

概要​

ElectronのBrowserWindowに（サードパーティの）ウェブコンテンツを埋め込みたい場合、3つのオプションがあります。<iframe>タグ、<webview>タグ、そしてWebContentsViewです。それぞれ少しずつ異なる機能を提供し、異なる状況で役立ちます。これらの中からどれを選ぶか判断するのに役立つように、このガイドでは各オプションの違いと機能を説明します。

iframe​

Electronのiframeは、通常のブラウザのiframeと同様に動作します。ページ内の<iframe>要素は、外部ウェブページを表示できます。ただし、それらのコンテンツセキュリティポリシーがそれを許可している場合に限ります。<iframe>タグ内のサイトの機能を制限するには、sandbox属性を使用し、サポートしたい機能のみを許可することをお勧めします。

WebView​

重要な注意: 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コンテンツに対して正確に配置するには、メインプロセスとレンダラープロセス間の連携が必要です。