<webview>
タグ
警告
Electron の webview
タグは Chromium の webview
に基づきつつ、劇的に変更されています。 これはレンダリング、ナビゲーション、イベントルーティングを含む webview
の安定性に影響しています。 We currently recommend to not use the webview
tag and to consider alternatives, like iframe
, a WebContentsView
, or an architecture that avoids embedded content altogether.
有効にする
既定では webview
タグは Electron >= 5 では無効化されています。 タグを有効にするには、BrowserWindow
を構築するときに webviewTag
webPreferences オプションを設定します。 詳しい情報については、BrowserWindow コンストラクタ を参照してください。
概要
分離したフレームとプロセスに外部ウェブコンテンツを表示します。
プロセス: レンダラー
このクラスは 'electron'
モジュールからはエクスポートされません。 Electron API では、他のメソッドの戻り値としてのみ利用できます。
webview
タグを使用して、Electron アプリに 'ゲスト' コンテンツ (ウェブページなど) を埋め込むことができます。 ゲストコンテンツは webview
コンテナに含まれています。 アプリ内の埋め込みページは、ゲストコンテンツのレイアウトとレンダリングの方法を制御します。
iframe
と異なり、 webview
はアプリとは別のプロセスで実行されます。 これはウェブページと同じ権限を持っておらず、アプリと埋め込みコンテンツの間のやりとりは全て非同期になります。 これにより、埋め込みコンテンツからアプリが保護されます。 注釈: ホストページから webview 上で呼び出されるほとんどのメソッドは、メインプロセスへの同期呼び出しを必要とします。
サンプル
アプリにウェブページを埋め込むには、アプリの埋め込みページ (これはゲストコンテンツを表示するアプリページ) へ webview
タグを追加します。 最もシンプルな形式では、webview
タグには、ウェブページの 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つはウェブページのロード開始を、もう1つはウェブページのロード停止を傍受し、ロード時に "ロード中..." というメッセージを表示します。
<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 iframe (OOPIF) で実装されています。 webview
タグは本質的には、見えない DOM を用いてその内側に iframe
要素をラップしたカスタム要素です。
なので webview
の動作はクロスドメイン iframe
ととても似ています。例として、
webview
をクリックしたとき、ページフォーカスが埋め込みフレームからwebview
に移動します。webview
にキーボード、マウス、スクロールイベントリスナを追加することはできません。- 埋め込みフレームと
webview
間のすべての反応は非同期です。
CSS スタイルの注意事項
webview
タグのスタイルでは、webview
コンテナでの子の iframe
要素の高さと幅を完全に埋めるのに内部的に 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 Integration を持ち、低レベルのシステムリソースにアクセスするのに、require
や process
のような Node API が使用できます。 デフォルトでは、ゲストページ内の Node Integration は無効化されています。
nodeintegrationinsubframes
<webview src="https://www.google.com/" nodeintegrationinsubframes></webview>
この boolean
は webview
内の iframe などのサブフレームで NodeJS サポートを有効にするための実験的オプションです。 すべてのプリロードは iframe 毎にロードされます。メインフレーム内かそうでないか判断するには process.isMainFrame
が使用できます。 デフォルトではゲストページ内のこのオプションは無効化されています。
plugins
<webview src="https://www.github.com/" plugins></webview>
boolean
。 この属性が存在する場合、webview
内のゲストページはブラウザのプラグインを使用できます。 プラグインはデフォルトで無効です。
preload
<!-- ファイルから -->
<webview src="https://www.github.com/" preload="./test.js"></webview>
<!-- または asar アーカイブから読み込みたい場合 -->
<webview src="https://www.github.com/" preload="./app.asar/test.js"></webview>
この string
は、ゲストのページで他のスクリプトを実行する前に読み込まれるスクリプトを指定します。 スクリプトの URL のプロトコルは file:
である必要があります (asar:
アーカイブを使用している場合でも)。これは、内部で Node の require
によって、asar:
アーカイブを仮想ディレクトリとして扱い読み込むためです。
ゲストページに Node Integration がない場合、このスクリプトはすべての Node APIにアクセスできますが、Node によって挿入されたグローバルオブジェクトはこのスクリプトの実行が終了した後に削除されます。
httpreferrer
<webview src="https://www.github.com/" httpreferrer="https://example.com/"></webview>
ゲストページの参照先 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
。 この属性が存在すると、ゲストページでウェブセキュリティが無効になります。 ウェブセキュリティはデフォルトで有効です。
この値は最初のナビゲーションの前にのみ変更できます。
partition
<webview src="https://github.com" partition="persist:github"></webview>
<webview src="https://electronjs.org" 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>
webview に設定するウェブ設定を指定する文字列のコンマ区切りリストの string
です。 サポートされている設定の文字列の完全なリストは、BrowserWindow にあります。 In addition, webview supports the following preferences:
transparent
boolean (optional) - Whether to enable background transparency for the guest page. 省略値はtrue
です。 Note: The guest page's text and background colors are derived from the color scheme of its root element. When transparency is enabled, the text color will still change accordingly but the background will remain transparent.
この文字列は、window.open
の features 文字列と同じ形式に従います。 名前自体には true
のブール値が与えられます。 設定は、=
とそれに続く値を含めることによって別の値に設定できます。 特殊な値として、yes
と 1
は true
として解釈され、no
と 0
は false
として解釈されます。
enableblinkfeatures
<webview src="https://www.github.com/" enableblinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>
有効にする Blink 機能を指定する ,
区切りの文字列リストである string
です。 サポートされている機能の文字列の完全なリストは、RuntimeEnabledFeatures.json5 ファイルにあります。
disableblinkfeatures
<webview src="https://www.github.com/" disableblinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>
無効にする Blink 機能を指定する ,
区切りの文字列リストである string
です。 サポートされている機能の文字列の完全なリストは、RuntimeEnabledFeatures.json5 ファイルにあります。
メソッド
webview
タグには以下のメソッドがあります。
注釈: メソッドを使用する前に webview 要素をロードする必要があります。
サンプル
const webview = document.querySelector('webview')
webview.addEventListener('dom-ready', () => {
webview.openDevTools()
})
<webview>.loadURL(url[, options])
url
URL
戻り値 Promise<void>
- この promise は、ページ読み込みが完了した時 (did-finish-load
を参照) に解決され、ページの読み込みに失敗した時 (did-fail-load
を参照) に拒否されます。
url
を webview にロードします。url
には、http://
または file://
のような、プロトコルのプレフィックスを含みます。
<webview>.downloadURL(url[, options])
url
string
ナビゲーションなしで 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 を挿入し、挿入されたスタイルシートの一意なキーを返します。
<webview>.removeInsertedCSS(key)
key
string
戻り値 Promise<void>
- 削除に成功すると解決されます。
現在のウェブページから挿入された CSS を削除します。 スタイルシートは <webview>.insertCSS(css)
から返されるキーで識別されます。
<webview>.executeJavaScript(code[, userGesture])
code
stringuserGesture
boolean (任意) - 省略値はfalse
。
戻り値 Promise<any>
- 実行されたコードの結果で resolve する Promise。コードの結果が reject な Promise である場合は reject な Promise。
ページ内の code
を評価します。 userGesture
が設定されている場合、ページのユーザジェスチャコンテキストが作成されます。 requestFullScreen
のようなユーザの操作を必要とする HTML API は、このオプションを自動化に利用できます。
<webview>.openDevTools()
ゲストページの開発者向けツールウインドウを開きます。
<webview>.closeDevTools()
ゲストページの開発者向けツールウインドウを閉じます。
<webview>.isDevToolsOpened()
戻り値 boolean
- ゲストページに開発者向けツールウインドウが適用されているかどうか。
<webview>.isDevToolsFocused()
戻り値 boolean
- ゲストページの開発者向けツールウインドウがフォーカスされているかどうか。
<webview>.inspectElement(x, y)
x
Integery
Integer
ゲストページの (x
, y
) の位置の要素の検査を開始します。
<webview>.inspectSharedWorker()
ゲストページに表示されている共有ワーカーコンテキストの開発者向けツールを開きます。
<webview>.inspectServiceWorker()
ゲストページに表示されているサービスワーカコンテキストの開発者向けツールを開きます。
<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)
フォーカスされているフレーム内の現在のテキスト選択の始点と終点を、指定の量だけ調整します。 負の値を指定すると選択範囲はドキュメントの先頭方向に、正の値を指定すると選択範囲はドキュメントの末尾方向に移動します。
サンプルは 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 - 検索するコンテンツ。空にしてはいけません。
戻り値 Integer
- リクエストに使われたリクエスト ID。
ウェブページ内の text
のすべてのマッチを探すリクエストを開始します。 リクエストの結果は found-in-page
イベントを読むことで取得できます。
<webview>.stopFindInPage(action)
action
string -<webview>.findInPage
リクエストを終了する際に行うアクションを指定します。clearSelection
- 選択を消去する。keepSelection
- その選択を通常の選択に変換する。activateSelection
- 選択ノードをフォーカスして、クリックする。
指定された action
で、webview
の findInPage
リクエストを停止します。
<webview>.print([options])
戻り値 Promise<void>
webview
のウェブページを印刷します。 webContents.print([options])
と同じです。
<webview>.printToPDF(options)
戻り値 Promise<Uint8Array>
- 生成された PDF データで実行されます。
webview
のウェブページを 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>
channel
を介してレンダラープロセスに非同期メッセージを送信します。任意の引数を送ることもできます。 レンダラープロセスは ipcRenderer
モジュールで channel
イベントをリッスンしてメッセージを処理できます。
サンプルは webContents.sendToFrame をご参照ください。
<webview>.sendInputEvent(event)
戻り値 Promise<void>
入力 event
をページに送ります。
event
オブジェクトの詳細については、webContents.sendInputEvent を参照してください。
<webview>.setZoomFactor(factor)
factor
number - 拡大率。
指定の拡大率に変更します。 拡大率は百分率なので、300% = 3.0 です。
<webview>.setZoomLevel(level)
level
number - 拡大レベル。
指定レベルに拡大レベルを変更します。 原寸は 0 で、各増減分はそれぞれ 20% ずつの拡大または縮小を表し、デフォルトで元のサイズの 300% から 50% までに制限されています。 この式は scale := 1.2 ^ level
です。
注意: Chromium でのズームポリシーはドメインごとです。すなわち、特定ドメインのズームレベルは、同じドメインのウィンドウの全インスタンスに伝播します。 ウインドウの URL が別々であれば、ウインドウごとのズームになります。
<webview>.getZoomFactor()
戻り値 number
- 現在の拡大率。
<webview>.getZoomLevel()
戻り値 number
- 現在の拡大レベル。
<webview>.setVisualZoomLevelLimits(minimumLevel, maximumLevel)
minimumLevel
numbermaximumLevel
number
戻り値 Promise<void>
ピンチによる拡大レベルの最大値と最小値を設定します。
<webview>.showDefinitionForSelection()
macOS
ページ上の選択された単語を検索するポップアップ辞書を表示します。
<webview>.getWebContentsId()
戻り値 number
- この webview
の WebContents ID。
DOM イベント
webview
タグでは、以下の DOM イベントを使用できます。
イベント: 'load-commit'
戻り値:
url
stringisMainFrame
boolean
ロードを要求したときに発生します。 これには、現在のドキュメント内のナビゲーションとサブフレームのドキュメントレベルのロードが含まれますが、非同期のリソース読み込みは含まれません。
イベント: 'did-finish-load'
ナビゲーションが終了した時、すなわち、タブのくるくるが止まったときや、onload
イベントが送られた後に、発行されます。
イベント: 'did-fail-load'
戻り値:
errorCode
IntegererrorDescription
stringvalidatedURL
stringisMainFrame
boolean
このイベントは did-finish-load
のようですが、ロードが失敗した、キャンセルされた、window.stop()
が呼び出されたなどで発生します。
イベント: 'did-frame-finish-load'
戻り値:
isMainFrame
boolean
フレームのナビゲーションが終了したときに発行されます。
イベント: 'did-start-loading'
タブのくるくるが始まるタイミングに対応しています。
イベント: 'did-stop-loading'
タブのくるくるが止まるタイミングに対応しています。
イベント: 'did-attach'
埋め込みWebコンテンツに添付したときに発行されます。
イベント: 'dom-ready'
指定のフレームの document が読み込まれたときに発行されます。
イベント: 'page-title-updated'
戻り値:
title
stringexplicitSet
boolean
ナビゲーション中にページタイトルが設定されると発生します。 explicitSet
は、タイトルがファイル URL から合成されている場合に false になります。
イベント: 'page-favicon-updated'
戻り値:
favicons
string[] - URLの配列。
ページがファビコンの URL を受け取ると発行されます。
イベント: 'enter-html-full-screen'
HTML API にトリガーされてページがフルスクリーンになるときに発生します。
イベント: 'leave-html-full-screen'
HTML API にトリガーされてページがフルスクリーンから抜けるときに発生します。
Event: '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('ゲストページのメッセージログ:', e.message)
})
イベント: 'found-in-page'
戻り値:
result
ObjectrequestId
IntegeractiveMatchOrdinal
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
stringisMainFrame
booleanframeProcessId
IntegerframeRoutingId
Integer
ユーザーまたはページが <webview>
またはその中に埋め込まれた任意のフレーム内でナビゲーションを開始したいときに発生します。 window.location
オブジェクトが変更されるか、ユーザがページ内のリンクをクリックしたときに発生することがあります。
このイベントは、 <webview>.loadURL
や <webview>.back
のような、API によってプログラム上から開始されるナビゲーションのときには発行されません。
アンカーリンクのクリックや window.location.hash
の更新のような、ページ内ナビゲーションでも発行されません。 これを意図する場合は did-navigate-in-page
を使用して下さい。
event.preventDefault()
を呼んでも効果は ありません。
イベント: 'did-start-navigation'
戻り値:
url
stringisInPlace
booleanisMainFrame
booleanframeProcessId
IntegerframeRoutingId
Integer
フレーム (メインを含む) がナビゲーションを始めているときに発生します。 ページ内ナビゲーションの場合、isInPlace
が true
になります。
イベント: 'did-redirect-navigation'
戻り値:
url
stringisInPlace
booleanisMainFrame
booleanframeProcessId
IntegerframeRoutingId
Integer
ナビゲーション後にサーバーサイドリダイレクトが発生すると発行されます。 302 リダイレクトなどがその例です。
イベント: 'did-navigate'
戻り値:
url
string
ナビゲーションが完了したときに発行されます。
このイベントは、アンカーリンクのクリックや window.location.hash
の更新のような、ページ内ナビゲーションでは発行されません。 これを意図する場合は did-navigate-in-page
を使用して下さい。
イベント: 'did-frame-navigate'
戻り値:
url
stringhttpResponseCode
Integer - HTTP ナビゲーションが無い場合は-1httpStatusText
string - 非 HTTP ナビゲーションでは空です。isMainFrame
booleanframeProcessId
IntegerframeRoutingId
Integer
フレームのナビゲーションが完了したときに発生します。
このイベントは、アンカーリンクのクリックや window.location.hash
の更新のような、ページ内ナビゲーションでは発行されません。 これを意図する場合は did-navigate-in-page
を使用して下さい。
イベント: 'did-navigate-in-page'
戻り値:
isMainFrame
booleanurl
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
stringargs
any[]
ゲストページが埋め込みページに非同期メッセージを送信したときに発生します。
sendToHost
メソッドと ipc-message
イベントを使用すると、ゲストページと埋め込みページの間で通信できます。
// 埋め込みページ内
const webview = document.querySelector('webview')
webview.addEventListener('ipc-message', (event) => {
console.log(event.channel)
// "pong" が出力される
})
webview.send('ping')
// ゲストページ内
const { ipcRenderer } = require('electron')
ipcRenderer.on('ping', () => {
ipcRenderer.sendToHost('pong')
})
イベント: 'render-process-gone'
戻り値:
details
RenderProcessGoneDetails
レンダラープロセスが予期せず消えたときに発生します。 プロセスがクラッシュした場合やキルされた場合は正常です。
イベント: 'plugin-crashed'
戻り値:
name
stringversion
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 内でリンクがクリックされたとき、またはコンテキストメニューでリンクに対して「新規タブで開く」が選択されたときに発行されます。
Event: 'devtools-search-query'
戻り値:
event
Eventquery
string - text to query for.
Emitted when 'Search' is selected for text in its context menu.
イベント: 'devtools-opened'
開発者向けツールが開かれたときに発行されます。
イベント: 'devtools-closed'
開発者向けツールが閉じられたときに発行されます。
イベント: 'devtools-focused'
開発者向けツールがフォーカスされた / 開かれたときに発行されます。
イベント: 'context-menu'
戻り値:
params
Objectx
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-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 - レンダラーがテキストをリッチ編集できると信頼しているかどうか。
処理が必要な新しいコンテキストメニューがあるときに発行されます。