`<webview>` タグ

警告

Electron の webview タグは、Chromium の webview をベースにしており、現在、アーキテクチャの大幅な変更が行われています。これは、レンダリング、ナビゲーション、イベントルーティングなど、webviews の安定性に影響を与えます。現在、webview タグの使用は推奨されておらず、iframe、WebContentsView、または埋め込みコンテンツを完全に避けるアーキテクチャなどの代替手段を検討することをお勧めします。

有効化

デフォルトでは、Electron >= 5 では webview タグは無効になっています。BrowserWindow を構築する際に webviewTag webPreferences オプションを設定して、タグを有効にする必要があります。詳細については、BrowserWindow コンストラクタドキュメントを参照してください。

概要

外部の Web コンテンツを分離されたフレームとプロセスで表示します。

プロセス: レンダラー
このクラスは 'electron' モジュールからはエクスポートされません。Electron API の他のメソッドの戻り値としてのみ利用可能です。

Electron アプリに「ゲスト」コンテンツ (Web ページなど) を埋め込むには、webview タグを使用します。ゲストコンテンツは webview コンテナ内に含まれています。アプリ内の埋め込みページは、ゲストコンテンツのレイアウトとレンダリング方法を制御します。

iframe とは異なり、webview はアプリとは別のプロセスで実行されます。Web ページと同じ権限はなく、アプリと埋め込みコンテンツ間のすべてのやり取りは非同期になります。これにより、アプリは埋め込みコンテンツから安全に保たれます。注意: ホストページから webview で呼び出されるほとんどのメソッドは、メインプロセスへの同期呼び出しが必要です。

例

アプリに Web ページを埋め込むには、アプリの埋め込みページ (ゲストコンテンツを表示するアプリページ) に webview タグを追加します。最も単純な形式では、webview タグには Web ページの src と、webview コンテナの外観を制御する CSS スタイルが含まれます。

<webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>

ゲストコンテンツを何らかの方法で制御したい場合は、webview イベントをリッスンし、webview メソッドを使用してこれらのイベントに応答する JavaScript を記述できます。次に、2 つのイベントリスナーを含むサンプルコードを示します。1 つは Web ページの読み込み開始をリッスンし、もう 1 つは Web ページの読み込み停止をリッスンし、読み込み中は「読み込み中...」メッセージを表示します。

<script>
  onload = () => {
    const webview = document.querySelector('webview')
    const indicator = document.querySelector('.indicator')

    const loadstart = () => {
      indicator.innerText = 'loading...'
    }

    const loadstop = () => {
      indicator.innerText = ''
    }

    webview.addEventListener('did-start-loading', loadstart)
    webview.addEventListener('did-stop-loading', loadstop)
  }
</script>

内部実装

内部的には、webview は Out-of-Process iframes (OOPIFs) で実装されています。webview タグは、基本的に、シャドウ DOM を使用してその内部に iframe 要素をラップするカスタム要素です。

そのため、webview の動作は、クロスドメイン iframe と非常によく似ています。

webview をクリックすると、ページのフォーカスが埋め込みフレームから webview に移動します。
キーボード、マウス、およびスクロールイベントリスナーを webview に追加することはできません。
埋め込みフレームと webview 間のすべての反応は非同期です。

CSS スタイリングに関する注意

webview タグのスタイルは、従来のレイアウトおよび flexbox レイアウトで使用した場合に、子 iframe 要素が webview コンテナの全高さと全幅を確実に埋めるように、内部的に display:flex; を使用していることに注意してください。インラインレイアウトに display:inline-flex; を指定する場合を除き、デフォルトの display:flex; CSS プロパティを上書きしないでください。

タグ属性

webview タグには、次の属性があります。

`src`

<webview src="https://www.github.com/"></webview>

表示される URL を表す string。この属性に書き込むと、トップレベルのナビゲーションが開始されます。

src に自身の値を割り当てると、現在のページがリロードされます。

src 属性は、data:text/plain,Hello, world! などのデータ URL も受け入れることができます。

`nodeintegration`

<webview src="https://www.google.com/" nodeintegration></webview>

boolean。この属性が存在する場合、webview のゲストページは node 統合を持ち、require や process などの node API を使用して低レベルのシステムリソースにアクセスできます。Node 統合は、ゲストページではデフォルトで無効になっています。

`nodeintegrationinsubframes`

<webview src="https://www.google.com/" nodeintegrationinsubframes></webview>

webview 内の iframe などのサブフレームで NodeJS のサポートを有効にする実験的なオプションの boolean。すべてのプリロードはすべての iframe に読み込まれます。process.isMainFrame を使用して、メインフレーム内かどうかを判断できます。このオプションは、ゲストページではデフォルトで無効になっています。

`plugins`

<webview src="https://www.github.com/" plugins></webview>

boolean。この属性が存在する場合、webview のゲストページはブラウザプラグインを使用できるようになります。プラグインはデフォルトで無効になっています。

`preload`

<!-- from a file -->
<webview src="https://www.github.com/" preload="./test.js"></webview>
<!-- or if you want to load from an asar archive -->
<webview src="https://www.github.com/" preload="./app.asar/test.js"></webview>

ゲストページで他のスクリプトが実行される前に読み込まれるスクリプトを指定する string。スクリプトの URL のプロトコルは file: でなければなりません (asar: アーカイブを使用する場合でも)。これは、Node の require によって内部的に読み込まれるため、asar: アーカイブを仮想ディレクトリとして扱うためです。

ゲストページに node 統合がない場合でも、このスクリプトはすべての Node API にアクセスできますが、このスクリプトの実行が完了すると、Node によって挿入されたグローバルオブジェクトは削除されます。

`httpreferrer`

<webview src="https://www.github.com/" httpreferrer="https://example.com/"></webview>

ゲストページの referrer URL を設定する string。

`useragent`

<webview src="https://www.github.com/" useragent="Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko"></webview>

ページがナビゲートされる前にゲストページのユーザーエージェントを設定する string。ページが読み込まれたら、setUserAgent メソッドを使用してユーザーエージェントを変更します。

`disablewebsecurity`

<webview src="https://www.github.com/" disablewebsecurity></webview>

boolean。この属性が存在する場合、ゲストページでは Web セキュリティが無効になります。Web セキュリティはデフォルトで有効になっています。

この値は、最初のナビゲーションの前にのみ変更できます。

`partition`

<webview src="https://github.com" partition="persist:github"></webview>
<webview src="https://electron.dokyumento.jp" partition="electron"></webview>

ページで使用するセッションを設定する string。partition が persist: で始まる場合、ページは同じ partition を持つアプリ内のすべてのページで利用可能な永続セッションを使用します。persist: プレフィックスがない場合、ページはインメモリセッションを使用します。同じ partition を割り当てることにより、複数のページが同じセッションを共有できます。partition が設定されていない場合、アプリのデフォルトセッションが使用されます。

アクティブなレンダラープロセスのセッションは変更できないため、この値は最初のナビゲーションの前にのみ変更できます。値を変更しようとすると、DOM 例外が発生して失敗します。

`allowpopups`

<webview src="https://www.github.com/" allowpopups></webview>

boolean。この属性が存在する場合、ゲストページは新しいウィンドウを開くことを許可されます。ポップアップはデフォルトで無効になっています。

`webpreferences`

<webview src="https://github.com" webpreferences="allowRunningInsecureContent, javascript=no"></webview>

string 型の値で、WebView に設定する Web プリファレンスをカンマ区切りで指定します。サポートされているプリファレンス文字列の完全なリストは、BrowserWindow を参照してください。

文字列の形式は、window.open の features 文字列と同じです。名前のみが指定されている場合は、true ブール値が与えられます。プリファレンスを別の値に設定するには、= に続けて値を指定します。特殊な値として yes および 1 は true と解釈され、no および 0 は false と解釈されます。

`enableblinkfeatures`

<webview src="https://www.github.com/" enableblinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>

string 型の値で、有効にする Blink の機能を , で区切ったリストで指定します。サポートされている機能文字列の完全なリストは、RuntimeEnabledFeatures.json5 ファイルで確認できます。

`disableblinkfeatures`

<webview src="https://www.github.com/" disableblinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>

string 型の値で、無効にする Blink の機能を , で区切ったリストで指定します。サポートされている機能文字列の完全なリストは、RuntimeEnabledFeatures.json5 ファイルで確認できます。

メソッド

webview タグには次のメソッドがあります。

注: メソッドを使用する前に、webview 要素をロードする必要があります。

例

const webview = document.querySelector('webview')
webview.addEventListener('dom-ready', () => {
  webview.openDevTools()
})

`<webview>.loadURL(url[, options])`

url URL
options Object (オプション)
- httpReferrer (string | Referrer) (オプション) - HTTP リファラー URL。
- userAgent string (オプション) - リクエストを発信するユーザーエージェント。
- extraHeaders string (オプション) - "\n" で区切られた追加のヘッダー。
- postData (UploadRawData | UploadFile)[] (オプション)
- baseURLForDataURL string (オプション) - データ URL によってロードされるファイルのベース URL（末尾にパス区切り文字付き）。これは、指定された url がデータ URL であり、他のファイルをロードする必要がある場合にのみ必要です。

Promise<void> を返します - ページがロードを完了したときに promise が解決され (「did-finish-load」を参照)、ページのロードに失敗した場合 (「did-fail-load」を参照) は拒否されます。

webview に url をロードします。url には、http:// または file:// などのプロトコルプレフィックスが含まれている必要があります。

`<webview>.downloadURL(url[, options])`

url string
options Object (オプション)
- headers Record<string, string> (オプション) - HTTP リクエストヘッダー。

ナビゲーションせずに、url のリソースのダウンロードを開始します。

`<webview>.getURL()`

string を返します - ゲストページの URL。

`<webview>.getTitle()`

string を返します - ゲストページのタイトル。

`<webview>.isLoading()`

boolean を返します - ゲストページがまだリソースをロード中かどうか。

`<webview>.isLoadingMainFrame()`

boolean を返します - メインフレーム（およびその中の iframe またはフレームだけでなく）がまだロード中かどうか。

`<webview>.isWaitingForResponse()`

boolean を返します - ゲストページがページのメインリソースの最初のレスポンスを待っているかどうか。

`<webview>.stop()`

保留中のナビゲーションを停止します。

`<webview>.reload()`

ゲストページをリロードします。

`<webview>.reloadIgnoringCache()`

ゲストページをリロードし、キャッシュを無視します。

`<webview>.canGoBack()`

boolean を返します - ゲストページが戻れるかどうか。

`<webview>.canGoForward()`

boolean を返します - ゲストページが進めるかどうか。

`<webview>.canGoToOffset(offset)`

offset Integer

boolean を返します - ゲストページが offset に移動できるかどうか。

`<webview>.clearHistory()`

ナビゲーション履歴をクリアします。

`<webview>.goBack()`

ゲストページを戻します。

`<webview>.goForward()`

ゲストページを進めます。

`<webview>.goToIndex(index)`

index Integer

指定された絶対インデックスに移動します。

`<webview>.goToOffset(offset)`

offset Integer

「現在のエントリ」からの指定されたオフセットに移動します。

`<webview>.isCrashed()`

boolean を返します - レンダラープロセスがクラッシュしたかどうか。

`<webview>.setUserAgent(userAgent)`

userAgent string

ゲストページのユーザーエージェントをオーバーライドします。

`<webview>.getUserAgent()`

string を返します - ゲストページのユーザーエージェント。

`<webview>.insertCSS(css)`

css string

Promise<string> を返します - 挿入された CSS のキーを解決する promise で、このキーは後で <webview>.removeInsertedCSS(key) を介して CSS を削除するために使用できます。

CSS を現在の Web ページに挿入し、挿入されたスタイルシートの一意のキーを返します。

`<webview>.removeInsertedCSS(key)`

key string

Promise<void> を返します - 削除が成功した場合に解決されます。

挿入された CSS を現在の Web ページから削除します。スタイルシートは、<webview>.insertCSS(css) から返されるキーによって識別されます。

`<webview>.executeJavaScript(code[, userGesture])`

code string
userGesture boolean (オプション) - デフォルトは false です。

Promise<any> を返します - 実行されたコードの結果で解決される promise。または、コードの結果が拒否された promise の場合は拒否されます。

ページで code を評価します。userGesture が設定されている場合は、ページにユーザージェスチャコンテキストが作成されます。ユーザー操作を必要とする requestFullScreen などの HTML API は、自動化のためにこのオプションを利用できます。

`<webview>.openDevTools()`

ゲストページの DevTools ウィンドウを開きます。

`<webview>.closeDevTools()`

ゲストページの DevTools ウィンドウを閉じます。

`<webview>.isDevToolsOpened()`

boolean を返します - ゲストページに DevTools ウィンドウがアタッチされているかどうか。

`<webview>.isDevToolsFocused()`

boolean を返します - ゲストページの DevTools ウィンドウがフォーカスされているかどうか。

`<webview>.inspectElement(x, y)`

x Integer
y Integer

ゲストページの (x, y) 位置にある要素の検査を開始します。

`<webview>.inspectSharedWorker()`

ゲストページに存在する共有ワーカーコンテキストの DevTools を開きます。

`<webview>.inspectServiceWorker()`

ゲストページに存在するサービスワーカーコンテキストの DevTools を開きます。

`<webview>.setAudioMuted(muted)`

muted boolean

ゲストページをミュートに設定します。

`<webview>.isAudioMuted()`

boolean を返します - ゲストページがミュートになっているかどうか。

`<webview>.isCurrentlyAudible()`

boolean を返します - 現在オーディオが再生中かどうか。

`<webview>.undo()`

ページで編集コマンド undo を実行します。

`<webview>.redo()`

ページで編集コマンド redo を実行します。

`<webview>.cut()`

ページ内で編集コマンドcutを実行します。

`<webview>.copy()`

ページ内で編集コマンドcopyを実行します。

`<webview>.centerSelection()`

ページ内の現在のテキスト選択を中央に配置します。

`<webview>.paste()`

ページ内で編集コマンドpasteを実行します。

`<webview>.pasteAndMatchStyle()`

ページ内で編集コマンドpasteAndMatchStyleを実行します。

`<webview>.delete()`

ページ内で編集コマンドdeleteを実行します。

`<webview>.selectAll()`

ページ内で編集コマンドselectAllを実行します。

`<webview>.unselect()`

ページ内で編集コマンドunselectを実行します。

`<webview>.scrollToTop()`

現在の<webview>の最上部までスクロールします。

`<webview>.scrollToBottom()`

現在の<webview>の最下部までスクロールします。

`<webview>.adjustSelection(options)`

options オブジェクト
- start Number (オプション) - 現在の選択範囲の開始インデックスをシフトする量。
- end Number (オプション) - 現在の選択範囲の終了インデックスをシフトする量。

フォーカスされたフレーム内の現在のテキスト選択の開始点と終了点を、指定された量だけ調整します。負の量は選択範囲をドキュメントの先頭に移動し、正の量は選択範囲をドキュメントの末尾に移動します。

例については、webContents.adjustSelectionを参照してください。

`<webview>.replace(text)`

text string

ページ内で編集コマンドreplaceを実行します。

`<webview>.replaceMisspelling(text)`

text string

ページ内で編集コマンドreplaceMisspellingを実行します。

`<webview>.insertText(text)`

text string

Promise<void>を返します。

フォーカスされた要素にtextを挿入します。

`<webview>.findInPage(text[, options])`

text string - 検索するコンテンツ。空であってはなりません。
options Object (オプション)
- forward boolean (オプション) - 前方検索か後方検索かを指定します。デフォルトはtrueです。
- findNext boolean (オプション) - このリクエストで新しいテキスト検索セッションを開始するかどうか。最初の要求ではtrueにする必要があり、後続の要求ではfalseにする必要があります。デフォルトはfalseです。
- matchCase boolean (オプション) - 検索で大文字と小文字を区別する必要があるかどうか。デフォルトはfalseです。

Integerを返します - リクエストに使用されたリクエストID。

Webページ内のtextのすべてのマッチを検索するリクエストを開始します。リクエストの結果は、found-in-pageイベントをサブスクライブすることによって取得できます。

`<webview>.stopFindInPage(action)`

action string - <webview>.findInPageリクエストの終了時に実行するアクションを指定します。
- clearSelection - 選択範囲をクリアします。
- keepSelection - 選択範囲を通常の選択範囲に変換します。
- activateSelection - 選択ノードにフォーカスしてクリックします。

指定されたactionでwebviewのfindInPageリクエストを停止します。

`<webview>.print([options])`

options Object (オプション)
- silent boolean (オプション) - 印刷設定をユーザーに求めません。デフォルトはfalseです。
- printBackground boolean (オプション) - Webページの背景色と画像を印刷します。デフォルトはfalseです。
- deviceName string (オプション) - 使用するプリンターデバイス名を設定します。'Brother_QL_820NWB'のようにシステム定義の名前を使用する必要があり、'Brother QL-820NWB'のようにフレンドリーな名前は使用できません。
- color boolean (オプション) - 印刷されるWebページがカラーかグレースケールかを設定します。デフォルトはtrueです。
- margins オブジェクト (オプション)
  - marginType string (オプション) - default、none、printableArea、またはcustomを指定できます。customを選択した場合は、top、bottom、left、およびrightも指定する必要があります。
  - top number (オプション) - 印刷されるWebページの上マージン（ピクセル単位）。
  - bottom number (オプション) - 印刷されるWebページの下マージン（ピクセル単位）。
  - left number (オプション) - 印刷されるWebページの左マージン（ピクセル単位）。
  - right number (オプション) - 印刷されるWebページの右マージン（ピクセル単位）。
- landscape boolean (オプション) - Webページを横向きで印刷するかどうか。デフォルトはfalseです。
- scaleFactor number (オプション) - Webページの拡大縮小率。
- pagesPerSheet number (オプション) - 1枚の用紙に印刷するページ数。
- collate boolean (オプション) - Webページを照合するかどうか。
- copies number (オプション) - Webページの印刷部数。
- pageRanges Object[] (オプション) - 印刷するページ範囲。
  - from number - 印刷する最初のページ（0ベース）のインデックス。
  - to number - 印刷する最後のページ（0ベース）のインデックス（両端を含む）。
- duplexMode string (オプション) - 印刷されるWebページの両面印刷モードを設定します。simplex、shortEdge、またはlongEdgeを指定できます。
- dpi Record<string, number> (オプション)
  - horizontal number (オプション) - 水平dpi。
  - vertical number (オプション) - 垂直dpi。
- header string (オプション) - ページヘッダーとして印刷される文字列。
- footer string (オプション) - ページフッターとして印刷される文字列。
- pageSize string | Size (オプション) - 印刷されるドキュメントのページサイズを指定します。A3、A4、A5、Legal、Letter、Tabloid、またはマイクロメートル単位のheightを含むオブジェクトを指定できます。

Promise<void>を返します。

webviewのWebページを印刷します。webContents.print([options])と同じです。

`<webview>.printToPDF(options)`

options オブジェクト
- landscape boolean (オプション) - 用紙の向き。横向きの場合はtrue、縦向きの場合はfalseです。デフォルトはfalseです。
- displayHeaderFooter boolean (オプション) - ヘッダーとフッターを表示するかどうか。デフォルトはfalseです。
- printBackground boolean (オプション) - 背景グラフィックを印刷するかどうか。デフォルトはfalseです。
- scale number (オプション) - Webページのレンダリングの縮尺。デフォルトは1です。
- pageSize string | Size (オプション) - 生成されるPDFのページサイズを指定します。A0、A1、A2、A3、A4、A5、A6、Legal、Letter、Tabloid、Ledger、またはインチ単位のheightとwidthを含むオブジェクトを指定できます。デフォルトはLetterです。
- margins オブジェクト (オプション)
  - top number (オプション) - 上マージン（インチ単位）。デフォルトは1cm（〜0.4インチ）です。
  - bottom number (オプション) - 下マージン（インチ単位）。デフォルトは1cm（〜0.4インチ）です。
  - left number (オプション) - 左マージン（インチ単位）。デフォルトは1cm（〜0.4インチ）です。
  - right number (オプション) - 右マージン（インチ単位）。デフォルトは1cm（〜0.4インチ）です。
- pageRanges string (オプション) - 印刷するページ範囲（例: '1-5, 8, 11-13'）。デフォルトは空文字列で、すべてのページを印刷することを意味します。
- headerTemplate string (オプション) - 印刷ヘッダーのHTMLテンプレート。印刷値を挿入するために使用される次のクラスを含む有効なHTMLマークアップにする必要があります。date（フォーマットされた印刷日）、title（ドキュメントタイトル）、url（ドキュメントの場所）、pageNumber（現在のページ番号）、およびtotalPages（ドキュメント内の総ページ数）。たとえば、<span class=title></span>は、タイトルを含むスパンを生成します。
- footerTemplate string (オプション) - 印刷フッターのHTMLテンプレート。headerTemplateと同じ形式を使用する必要があります。
- preferCSSPageSize boolean (オプション) - CSSで定義されたページサイズを優先するかどうか。デフォルトはfalseで、その場合、コンテンツは用紙サイズに合わせて拡大縮小されます。
- generateTaggedPDF boolean (オプション) 実験的 - タグ付き（アクセシブル）PDFを生成するかどうか。デフォルトはfalseです。このプロパティは実験的であるため、生成されたPDFがPDF/UAおよびWCAG標準に完全に準拠していない場合があります。
- generateDocumentOutline boolean (オプション) 実験的 - コンテンツヘッダーからPDFドキュメントアウトラインを生成するかどうか。デフォルトはfalseです。

Promise<Uint8Array>を返します - 生成されたPDFデータで解決します。

webviewのWebページをPDFとして印刷します。webContents.printToPDF(options)と同じです。

`<webview>.capturePage([rect])`

rect Rectangle (オプション) - キャプチャするページの領域。

Promise<NativeImage>を返します - NativeImageで解決します

rect内のページの画像をキャプチャします。rectを省略すると、表示されているページ全体がキャプチャされます。

`<webview>.send(channel, ...args)`

channel string
...args any[]

Promise<void>を返します。

channelを介してレンダラープロセスに非同期メッセージを送信します。任意の引数を送信することもできます。レンダラープロセスは、ipcRendererモジュールを使用してchannelイベントをリッスンすることにより、メッセージを処理できます。

例については、webContents.sendを参照してください。

`<webview>.sendToFrame(frameId, channel, ...args)`

frameId [number, number] - [processId, frameId]
channel string
...args any[]

Promise<void>を返します。

例については、webContents.sendToFrameを参照してください。

`<webview>.sendInputEvent(event)`

event MouseInputEvent | MouseWheelInputEvent | KeyboardInputEvent

Promise<void>を返します。

入力eventをページに送信します。

eventオブジェクトの詳細については、webContents.sendInputEventを参照してください。

`<webview>.setZoomFactor(factor)`

factor number - ズームファクター。

ズームファクターを指定されたファクターに変更します。ズームファクターは、ズーム率を100で割ったものです。したがって、300% = 3.0 となります。

`<webview>.setZoomLevel(level)`

level number - ズームレベル。

ズームレベルを指定されたレベルに変更します。元のサイズは 0 で、それより上または下の各増分は、それぞれ元のサイズの 300% および 50% のデフォルト制限まで、20% 大きくまたは小さくズームすることを表します。この式は scale := 1.2 ^ level です。

注意: Chromiumレベルでのズームポリシーは同一オリジンであり、特定のドメインのズームレベルは、同じドメインを持つすべてのウィンドウのインスタンスに伝播します。ウィンドウのURLを区別することで、ウィンドウごとにズームが機能するようにできます。

`<webview>.getZoomFactor()`

number - 現在のズームファクターを返します。

`<webview>.getZoomLevel()`

number - 現在のズームレベルを返します。

`<webview>.setVisualZoomLevelLimits(minimumLevel, maximumLevel)`

minimumLevel number
maximumLevel number

Promise<void>を返します。

ピンチ操作によるズームの最大レベルと最小レベルを設定します。

`<webview>.showDefinitionForSelection()` macOS

ページ上で選択された単語を検索するポップアップ辞書を表示します。

`<webview>.getWebContentsId()`

number - この webview の WebContents ID を返します。

DOMイベント

以下のDOMイベントは、webview タグで使用できます。

イベント: 'load-commit'

戻り値

url string
isMainFrame boolean

ロードがコミットされたときに発生します。これには、現在のドキュメント内のナビゲーションやサブフレームドキュメントレベルのロードが含まれますが、非同期リソースのロードは含まれません。

イベント: 'did-finish-load'

ナビゲーションが完了したときに発生します。つまり、タブのスピナーが回転を停止し、onload イベントがディスパッチされます。

イベント: 'did-fail-load'

戻り値

errorCode Integer
errorDescription string
validatedURL string
isMainFrame boolean

このイベントは did-finish-load に似ていますが、ロードが失敗またはキャンセルされた場合、例えば window.stop() が呼び出された場合に発生します。

イベント: 'did-frame-finish-load'

戻り値

isMainFrame boolean

フレームがナビゲーションを完了したときに発生します。

イベント: 'did-start-loading'

タブのスピナーが回転を開始するタイミングに対応します。

イベント: 'did-stop-loading'

タブのスピナーが回転を停止するタイミングに対応します。

イベント: 'did-attach'

エンベッダーのWebContentsにアタッチされたときに発生します。

イベント: 'dom-ready'

指定されたフレーム内のドキュメントがロードされたときに発生します。

イベント: 'page-title-updated'

戻り値

title string
explicitSet boolean

ナビゲーション中にページタイトルが設定されたときに発生します。explicitSet は、タイトルがファイルURLから合成された場合は false になります。

イベント: 'page-favicon-updated'

戻り値

favicons string[] - URLの配列。

ページがファビコンURLを受信したときに発生します。

イベント: 'enter-html-full-screen'

ページがHTML APIによってトリガーされたフルスクリーンモードに入ったときに発生します。

イベント: 'leave-html-full-screen'

ページがHTML APIによってトリガーされたフルスクリーンモードから抜けたときに発生します。

イベント: 'console-message'

戻り値

level Integer - ログレベル。0から3まで。順番に verbose、info、warning、error に対応します。
message string - 実際のコンソールメッセージ
line Integer - このコンソールメッセージをトリガーしたソースの行番号
sourceId string

ゲストウィンドウがコンソールメッセージをログに記録したときに発生します。

次のコード例は、ログレベルやその他のプロパティに関係なく、すべてのログメッセージをエンベッダーのコンソールに転送します。

const webview = document.querySelector('webview')
webview.addEventListener('console-message', (e) => {
  console.log('Guest page logged a message:', e.message)
})

イベント: 'found-in-page'

戻り値

result Object
- requestId Integer
- activeMatchOrdinal Integer - アクティブな一致の位置。
- matches Integer - 一致数。
- selectionArea Rectangle - 最初の一致領域の座標。
- finalUpdate boolean

webview.findInPage リクエストの結果が利用可能になったときに発生します。

const webview = document.querySelector('webview')
webview.addEventListener('found-in-page', (e) => {
  webview.stopFindInPage('keepSelection')
})

const requestId = webview.findInPage('test')
console.log(requestId)

イベント: 'will-navigate'

戻り値

url string

ユーザーまたはページがナビゲーションを開始しようとしたときに発生します。これは、window.location オブジェクトが変更された場合、またはユーザーがページ内のリンクをクリックした場合に発生する可能性があります。

このイベントは、<webview>.loadURL や <webview>.back などのAPIを使用してプログラムでナビゲーションが開始された場合には発生しません。

また、アンカーリンクをクリックしたり、window.location.hash を更新したりするなど、ページ内ナビゲーション中には発生しません。この目的には did-navigate-in-page イベントを使用してください。

event.preventDefault() を呼び出しても効果はありません。

イベント: 'will-frame-navigate'

戻り値

url string
isMainFrame boolean
frameProcessId Integer
frameRoutingId Integer

ユーザーまたはページが <webview> 内または内部に埋め込まれた任意のフレーム内のナビゲーションを開始しようとしたときに発生します。これは、window.location オブジェクトが変更された場合、またはユーザーがページ内のリンクをクリックした場合に発生する可能性があります。

このイベントは、<webview>.loadURL や <webview>.back などのAPIを使用してプログラムでナビゲーションが開始された場合には発生しません。

event.preventDefault() を呼び出しても効果はありません。

戻り値

url string
isInPlace boolean
isMainFrame boolean
frameProcessId Integer
frameRoutingId Integer

任意のフレーム（メインフレームを含む）がナビゲーションを開始したときに発生します。isInPlace は、ページ内ナビゲーションの場合は true になります。

戻り値

url string
isInPlace boolean
isMainFrame boolean
frameProcessId Integer
frameRoutingId Integer

ナビゲーション中にサーバーサイドのリダイレクトが発生した後に発生します。たとえば、302リダイレクトなどです。

イベント: 'did-navigate'

戻り値

url string

ナビゲーションが完了したときに発生します。

このイベントは、アンカーリンクをクリックしたり、window.location.hash を更新したりするなど、ページ内ナビゲーションには発生しません。この目的には did-navigate-in-page イベントを使用してください。

イベント: 'did-frame-navigate'

戻り値

url string
httpResponseCode Integer - HTTP以外のナビゲーションの場合は -1
httpStatusText string - HTTP以外のナビゲーションの場合は空文字列
isMainFrame boolean
frameProcessId Integer
frameRoutingId Integer

任意のフレームナビゲーションが完了したときに発生します。

イベント: 'did-navigate-in-page'

戻り値

isMainFrame boolean
url string

ページ内ナビゲーションが発生したときに発生します。

ページ内ナビゲーションが発生すると、ページURLは変更されますが、ページ外へのナビゲーションは発生しません。これが発生する例としては、アンカーリンクをクリックした場合や、DOMの hashchange イベントがトリガーされた場合などがあります。

イベント: 'close'

ゲストページが自身を閉じようとしたときに発生します。

次のコード例は、ゲストが自身を閉じようとしたときに、webview を about:blank にナビゲートします。

const webview = document.querySelector('webview')
webview.addEventListener('close', () => {
  webview.src = 'about:blank'
})

イベント: 'ipc-message'

戻り値

frameId [number, number] - [processId, frameId] のペア。
channel string
args any[]

ゲストページがエンベッダーページに非同期メッセージを送信したときに発生します。

sendToHost メソッドと ipc-message イベントを使用すると、ゲストページと埋め込みページ間で通信できます。

// In embedder page.
const webview = document.querySelector('webview')
webview.addEventListener('ipc-message', (event) => {
  console.log(event.channel)
  // Prints "pong"
})
webview.send('ping')

// In guest page.
const { ipcRenderer } = require('electron')
ipcRenderer.on('ping', () => {
  ipcRenderer.sendToHost('pong')
})

イベント: 'render-process-gone'

戻り値

details RenderProcessGoneDetails

レンダラープロセスが予期せず消失したときに発生します。通常は、クラッシュまたは強制終了が原因です。

イベント: 'plugin-crashed'

戻り値

name string
version string

プラグインプロセスがクラッシュしたときに発生します。

イベント: 'destroyed'

WebContents が破棄されたときに発生します。

イベント: 'media-started-playing'

メディアの再生が開始されたときに発生します。

イベント: 'media-paused'

メディアが一時停止または再生完了したときに発生します。

イベント: 'did-change-theme-color'

戻り値

themeColor string

ページのテーマカラーが変更されたときに発生します。通常は、メタタグを検出したことが原因です。

<meta name='theme-color' content='#ff0000'>

イベント: 'update-target-url'

戻り値

url string

マウスがリンク上を移動したとき、またはキーボードでリンクにフォーカスが移動したときに発生します。

イベント: 'devtools-open-url'

戻り値

url string - クリックまたは選択されたリンクのURL。

DevTools でリンクがクリックされたとき、またはコンテキストメニューでリンクに対して「新しいタブで開く」が選択されたときに発生します。

イベント: 'devtools-search-query'

戻り値

event Event
query string - 検索対象のテキスト。

コンテキストメニューでテキストに対して「検索」が選択されたときに発生します。

イベント: 'devtools-opened'

DevTools が開かれたときに発生します。

イベント: 'devtools-closed'

DevTools が閉じられたときに発生します。

イベント: 'devtools-focused'

DevTools にフォーカスが当たったとき/開かれたときに発生します。

戻り値

params Object
- x Integer - x座標。
- y Integer - y座標。
- linkURL string - コンテキストメニューが呼び出されたノードを囲むリンクのURL。
- linkText string - リンクに関連付けられたテキスト。リンクの内容が画像の場合は空の文字列になる場合があります。
- pageURL string - コンテキストメニューが呼び出されたトップレベルページのURL。
- frameURL string - コンテキストメニューが呼び出されたサブフレームのURL。
- srcURL string - コンテキストメニューが呼び出された要素のソースURL。ソースURLを持つ要素は、画像、オーディオ、ビデオです。
- mediaType string - コンテキストメニューが呼び出されたノードのタイプ。none、image、audio、video、canvas、file、またはpluginになります。
- hasImageContents boolean - コンテキストメニューが呼び出された画像が、空でないコンテンツを持っているかどうか。
- isEditable boolean - コンテキストが編集可能かどうか。
- selectionText string - コンテキストメニューが呼び出された選択範囲のテキスト。
- titleText string - コンテキストメニューが呼び出された選択範囲のタイトルテキスト。
- altText string - コンテキストメニューが呼び出された選択範囲の代替テキスト。
- suggestedFilename string - コンテキストメニューの「名前を付けてリンク先を保存」オプションを使用してファイルを保存するときに使用する推奨ファイル名。
- selectionRect Rectangle - 選択範囲のドキュメント空間における座標を表す矩形。
- selectionStartOffset number - 選択テキストの開始位置。
- referrerPolicy Referrer - メニューが呼び出されたフレームのリファラーポリシー。
- misspelledWord string - カーソルの下のスペルミスされた単語（存在する場合）。
- dictionarySuggestions string[] - misspelledWordを置き換えるためにユーザーに表示する推奨単語の配列。スペルミスされた単語があり、スペルチェックが有効になっている場合にのみ使用可能です。
- frameCharset string - メニューが呼び出されたフレームの文字エンコーディング。
- formControlType string - コンテキストメニューが呼び出されたソース。可能な値には、none、button-button、field-set、input-button、input-checkbox、input-color、input-date、input-datetime-local、input-email、input-file、input-hidden、input-image、input-month、input-number、input-password、input-radio、input-range、input-reset、input-search、input-submit、input-telephone、input-text、input-time、input-url、input-week、output、reset-button、select-list、select-multiple、select-one、submit-button、およびtext-areaが含まれます。
- spellcheckEnabled boolean - コンテキストが編集可能である場合、スペルチェックが有効になっているかどうか。
- menuSourceType string - コンテキストメニューを呼び出した入力ソース。none、mouse、keyboard、touch、touchMenu、longPress、longTap、touchHandle、stylus、adjustSelection、またはadjustSelectionResetを指定できます。
- mediaFlags Object - コンテキストメニューが呼び出されたメディア要素のフラグ。
  - inError boolean - メディア要素がクラッシュしたかどうか。
  - isPaused boolean - メディア要素が一時停止しているかどうか。
  - isMuted boolean - メディア要素がミュートされているかどうか。
  - hasAudio boolean - メディア要素にオーディオがあるかどうか。
  - isLooping boolean - メディア要素がループしているかどうか。
  - isControlsVisible boolean - メディア要素のコントロールが表示されているかどうか。
  - canToggleControls boolean - メディア要素のコントロールが切り替え可能かどうか。
  - canPrint boolean - メディア要素を印刷できるかどうか。
  - canSave boolean - メディア要素をダウンロードできるかどうか。
  - canShowPictureInPicture boolean - メディア要素がピクチャーインピクチャーを表示できるかどうか。
  - isShowingPictureInPicture boolean - メディア要素が現在ピクチャーインピクチャーを表示しているかどうか。
  - canRotate boolean - メディア要素を回転できるかどうか。
  - canLoop boolean - メディア要素をループできるかどうか。
- editFlags Object - これらのフラグは、レンダラーが対応するアクションを実行できると信じているかどうかを示します。
  - canUndo boolean - レンダラーが元に戻せると信じているかどうか。
  - canRedo boolean - レンダラーがやり直せると信じているかどうか。
  - canCut boolean - レンダラーが切り取れると信じているかどうか。
  - canCopy boolean - レンダラーがコピーできると信じているかどうか。
  - canPaste boolean - レンダラーが貼り付けられると信じているかどうか。
  - canDelete boolean - レンダラーが削除できると信じているかどうか。
  - canSelectAll boolean - レンダラーがすべて選択できると信じているかどうか。
  - canEditRichly boolean - レンダラーがテキストをリッチに編集できると信じているかどうか。

処理する必要がある新しいコンテキストメニューがある場合に発生します。

警告
有効化
概要
例
内部実装
CSSスタイリングに関する注意
タグ属性
メソッド
DOM イベント

警告​

有効化​

概要​

例​

内部実装​

CSS スタイリングに関する注意​

タグ属性​

src​

nodeintegration​

nodeintegrationinsubframes​

plugins​

preload​

httpreferrer​

useragent​

disablewebsecurity​

partition​

allowpopups​

webpreferences​

enableblinkfeatures​

disableblinkfeatures​

メソッド​

<webview>.loadURL(url[, options])​

<webview>.downloadURL(url[, options])​

<webview>.getURL()​

<webview>.getTitle()​

<webview>.isLoading()​

<webview>.isLoadingMainFrame()​

<webview>.isWaitingForResponse()​

<webview>.stop()​

<webview>.reload()​

<webview>.reloadIgnoringCache()​

<webview>.canGoBack()​

<webview>.canGoForward()​

<webview>.canGoToOffset(offset)​

<webview>.clearHistory()​

<webview>.goBack()​

<webview>.goForward()​

<webview>.goToIndex(index)​

<webview>.goToOffset(offset)​

<webview>.isCrashed()​

<webview>.setUserAgent(userAgent)​

<webview>.getUserAgent()​

<webview>.insertCSS(css)​

<webview>.removeInsertedCSS(key)​

<webview>.executeJavaScript(code[, userGesture])​

<webview>.openDevTools()​

<webview>.closeDevTools()​

<webview>.isDevToolsOpened()​

<webview>.isDevToolsFocused()​

<webview>.inspectElement(x, y)​

<webview>.inspectSharedWorker()​

<webview>.inspectServiceWorker()​

<webview>.setAudioMuted(muted)​

<webview>.isAudioMuted()​

<webview>.isCurrentlyAudible()​

<webview>.undo()​

<webview>.redo()​

<webview>.cut()​

<webview>.copy()​

<webview>.centerSelection()​

<webview>.paste()​

<webview>.pasteAndMatchStyle()​

<webview>.delete()​

<webview>.selectAll()​

<webview>.unselect()​

<webview>.scrollToTop()​

<webview>.scrollToBottom()​

<webview>.adjustSelection(options)​

<webview>.replace(text)​

<webview>.replaceMisspelling(text)​

<webview>.insertText(text)​

<webview>.findInPage(text[, options])​

<webview>.stopFindInPage(action)​

<webview>.print([options])​

<webview>.printToPDF(options)​

<webview>.capturePage([rect])​

<webview>.send(channel, ...args)​

<webview>.sendToFrame(frameId, channel, ...args)​

<webview>.sendInputEvent(event)​

<webview>.setZoomFactor(factor)​

警告

有効化

概要

例

内部実装

CSS スタイリングに関する注意

タグ属性

`src`

`nodeintegration`

`nodeintegrationinsubframes`

`plugins`

`preload`

`httpreferrer`

`useragent`

`disablewebsecurity`

`partition`

`allowpopups`

`webpreferences`

`enableblinkfeatures`

`disableblinkfeatures`

メソッド

`<webview>.loadURL(url[, options])`

`<webview>.downloadURL(url[, options])`

`<webview>.getURL()`

`<webview>.getTitle()`

`<webview>.isLoading()`

`<webview>.isLoadingMainFrame()`

`<webview>.isWaitingForResponse()`

`<webview>.stop()`

`<webview>.reload()`

`<webview>.reloadIgnoringCache()`

`<webview>.canGoBack()`

`<webview>.canGoForward()`

`<webview>.canGoToOffset(offset)`

`<webview>.clearHistory()`

`<webview>.goBack()`

`<webview>.goForward()`

`<webview>.goToIndex(index)`

`<webview>.goToOffset(offset)`

`<webview>.isCrashed()`

`<webview>.setUserAgent(userAgent)`

`<webview>.getUserAgent()`

`<webview>.insertCSS(css)`

`<webview>.removeInsertedCSS(key)`

`<webview>.executeJavaScript(code[, userGesture])`

`<webview>.openDevTools()`

`<webview>.closeDevTools()`

`<webview>.isDevToolsOpened()`

`<webview>.isDevToolsFocused()`

`<webview>.inspectElement(x, y)`

`<webview>.inspectSharedWorker()`

`<webview>.inspectServiceWorker()`

`<webview>.setAudioMuted(muted)`

`<webview>.isAudioMuted()`

`<webview>.isCurrentlyAudible()`

`<webview>.undo()`

`<webview>.redo()`

`<webview>.cut()`

`<webview>.copy()`

`<webview>.centerSelection()`

`<webview>.paste()`

`<webview>.pasteAndMatchStyle()`

`<webview>.delete()`

`<webview>.selectAll()`

`<webview>.unselect()`

`<webview>.scrollToTop()`

`<webview>.scrollToBottom()`

`<webview>.adjustSelection(options)`

`<webview>.replace(text)`

`<webview>.replaceMisspelling(text)`

`<webview>.insertText(text)`

`<webview>.findInPage(text[, options])`

`<webview>.stopFindInPage(action)`

`<webview>.print([options])`

`<webview>.printToPDF(options)`

`<webview>.capturePage([rect])`

`<webview>.send(channel, ...args)`

`<webview>.sendToFrame(frameId, channel, ...args)`

`<webview>.sendInputEvent(event)`

`<webview>.setZoomFactor(factor)`