https://www.electronjs.org/ja/docs/latest/tutorial/web-embeds • 43 KB fetched Open original page
ウェブ埋め込み | Electron タグ、 タグ、 WebContentsView の 3 つの選択肢があります。 それぞれ多少の異なる機能を提供しており、さまざまな状況で役立ちます。 これらの選択を支援するため、このガイドではそれぞれの選択肢の違いと機能について説明します。"/> タグ、 タグ、 WebContentsView の 3 つの選択肢があります。 それぞれ多少の異なる機能を提供しており、さまざまな状況で役立ちます。 これらの選択を支援するため、このガイドではそれぞれの選択肢の違いと機能について説明します。"/>
メインコンテンツへ飛ぶ
Electron ドキュメント API ブログ ツール
* Electron Forge
* Electron Fiddle
コミュニティ
* ガバナンス
* 事例紹介
* リソース
リリース 日本語
* English
* Deutsch
* Español
* Français
* 日本語
* Português
* Русский
* 中文
検索
* はじめよう
* Electron のプロセス
* ベストプラクティス
* サンプル
* ダークモード
* デバイスアクセス
* アプリ内購入
*
* キーボード ショート カット
* ディープリンク
* デスクトップランチャーアクション
*
* Menus
* マルチスレッド
* ネイティブなファイルのドラッグ&ドロップ
* ナビゲーション履歴
* 通知
* オフスクリーンレンダリング
* オンライン/オフライン イベントの検出
* プログレスバー
* 最近使用したドキュメント
*
*
* BrowserWindow が表すファイル
*
* スペルチェッカー
* ウェブ埋め込み
* タスクバーのカスタマイズ
*
* ウインドウのカスタマイズ
* 開発
* Native Node Modules
* 配布方法
* テストとデバッグ
* リファレンス
* コントリビューション
*
* サンプル
* ウェブ埋め込み 目次
ウェブ埋め込み
概要
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 コンテンツに対して正確に配置するにはメインプロセスとレンダラープロセス間の調整が必要です。
このページを編集
前
スペルチェッカー
次
タスクバーのカスタマイズ
* 概要
* iframe
* WebView
* WebContentsView
ドキュメント
* 始めましょう
* API リファレンス
チェックリスト
* パフォーマンス
* セキュリティ
ツール
* Electron Forge
* Electron Fiddle
コミュニティ
* ガバナンス
* リソース
* Discord
* Bluesky
* X
* Mastodon
* Stack Overflow
その他
* GitHub
* Open Collective
* Infrastructure Dashboard
Copyright OpenJS Foundation and Electron contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation , please see our Trademark Policy and Trademark List . Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy
Hosting and infrastructure graciously provided by