webFrame
現在のウェブページの描画をカスタマイズします。
Process: Renderer
[!IMPORTANT] If you want to call this API from a renderer process with context isolation enabled, place the API call in your preload script and expose it using the
contextBridge
API.
webFrame
は現在のフレームを表示している WebFrame
クラスのインスタンスをエクスポートする Electron のモジュールです。 サブフレームは特定のプロパティとメソッド (webFrame.firstChild
など) によって取得できます。
現在のページを 200% にズームするサンプルです。
const { webFrame } = require('electron')
webFrame.setZoomFactor(2)
メソッド
WebFrame
クラスには以下のメソッドがあります。
webFrame.setZoomFactor(factor)
factor
Double - 拡大率。省略値は 1.0 です。
指定の拡大率に変更します。 拡大率は百分率なので、300% = 3.0 です。
拡大率は 0.0 より大きい必要があります。
webFrame.getZoomFactor()
戻り値 number
- 現在の拡大率。
webFrame.setZoomLevel(level)
level
number - 拡大レベル。
指定レベルに拡大レベルを変更します。 原寸は 0 で、各増減分はそれぞれ 20% ずつの拡大または縮小を表し、デフォルトで元のサイズの 300% から 50% までに制限されています。
[!NOTE] The zoom policy at the Chromium level is same-origin, meaning that the zoom level for a specific domain propagates across all instances of windows with the same domain. ウインドウの URL が別々であれば、ウインドウごとのズームになります。
webFrame.getZoomLevel()
戻り値 number
- 現在の拡大レベル。
webFrame.setVisualZoomLevelLimits(minimumLevel, maximumLevel)
minimumLevel
numbermaximumLevel
number
ピンチによる拡大レベルの最大値と最小値を設定します。
[!NOTE] Visual zoom is disabled by default in Electron. 再び有効にする場合は以下を呼び出します。
webFrame.setVisualZoomLevelLimits(1, 3)
[!NOTE] Visual zoom only applies to pinch-to-zoom behavior. Cmd+/-/0 ズームのショートカットは、それぞれアプリケーションの Menu の 'zoomIn'、'zoomOut'、'resetZoom' の MenuItem ロールで制御されます。 To disable shortcuts, manually define the Menu and omit zoom roles from the definition.
webFrame.setSpellCheckProvider(language, provider)
language
stringprovider
ObjectspellCheck
Functionwords
string[]callback
FunctionmisspeltWords
string[]
入力フィールドとテキストエリアのスペルチェックのプロバイダを設定します。
このメソッドを使用する場合は、ウインドウを構築するときに組み込みスペルチェックを無効にする必要があります。
const mainWindow = new BrowserWindow({
webPreferences: {
spellcheck: false
}
})
provider
は、スペルチェックのために個々の単語の配列を受け取る spellCheck
メソッドを持つオブジェクトである必要があります。 spellCheck
関数は非同期的に実行され、完了時にスペルミスの単語を含む callback
関数を呼び出します。
node-spellchecker をプロバイダとして使用するサンプルです。
const { webFrame } = require('electron')
const spellChecker = require('spellchecker')
webFrame.setSpellCheckProvider('en-US', {
spellCheck (words, callback) {
setTimeout(() => {
const misspelled = words.filter(x => spellchecker.isMisspelled(x))
callback(misspelled)
}, 0)
}
})
webFrame.insertCSS(css[, options])
css
string
戻り値 string
- 挿入された CSS のキー。後で webFrame.removeInsertedCSS(key)
を介して CSS を削除するために使用できます。
現在のウェブページに CSS を挿入し、挿入されたスタイルシートの一意なキーを返します。
webFrame.removeInsertedCSS(key)
key
string
現在のウェブページから挿入された CSS を削除します。 スタイルシートは webFrame.insertCSS(css)
から返されるキーで識別されます。
webFrame.insertText(text)
text
string
フォーカスされた要素に text
を挿入します。
webFrame.executeJavaScript(code[, userGesture][, callback])
code
stringuserGesture
boolean (任意) - 省略値はfalse
。callback
Function (任意) - スクリプトの実行後に呼び出されます。 フレームがサスペンド (モーダルアラートの表示など) されない限り、実行は同期的に行われ、メソッドから戻る前にコールバックが呼び出されます。 このメソッドは古いバージョンとの互換性のため、エラーが第 2 引数です。result
Anyerror
Error
戻り値 Promise<any>
- 実行されたコードの結果で resolve されるか、実行でスロー又は reject された結果の場合に reject される Promise。
ページ内の code
を評価します。
ブラウザウインドウでは、requestFullScreen
のような、いくつかの HTML API は、ユーザからのジェスチャーでのみ呼び出されます。 userGesture
を true
にセットすることでこの制限がなくなります。
webFrame.executeJavaScriptInIsolatedWorld(worldId, scripts[, userGesture][, callback])
worldId
Integer -0
は (コンテンツを実行する) デフォルトのメインワールド、999
は Electron のcontextIsolation
機能で使用されるワールドです。 1..536870911 の範囲の値を受け付けます。scripts
WebSource[]userGesture
boolean (任意) - 省略値はfalse
。callback
Function (任意) - スクリプトの実行後に呼び出されます。 フレームがサスペンド (モーダルアラートの表示など) されない限り、実行は同期的に行われ、メソッドから戻る前にコールバックが呼び出されます。 このメソッドは古いバージョンとの互換性のため、エラーが第 2 引数です。result
Anyerror
Error
戻り値 Promise<any>
- コードの実行結果で resolve するか、実行を開始できなかった場合に reject される Promise。
executeJavaScript
のように動きますが、 scripts
はイソレートコンテキスト内で評価します。
スクリプトの実行そのものが失敗した場合、返された Promise 拒否されず result
は undefined
になることに注意してください。 これは、Chromium が隔離されたワールドから外のワールドへエラーを転送しないためです。
webFrame.setIsolatedWorldInfo(worldId, info)
worldId
Integer - JavaScript を実行するワールドの ID。0
はデフォルトのワールドで、999
は Electron のcontextIsolation
機能で使用されるワールドです。 Chrome 拡張機能の ID は[1 << 20, 1 << 29)
の範囲で確保します。 任意の整数を指定できます。info
ObjectsecurityOrigin
string (任意) - 隔離された空間のためのセキュリティオリジンcsp
string (任意) - 隔離された空間のためのコンテンツセキュリティポリシーname
string (任意) - 隔離されたワールドの名前。 デベロッパー ツールで役立ちます。
隔離されたワールドのセキュリティオリジン、コンテンツセキュリティポリシー、名前を設定します。
[!NOTE] If the
csp
is specified, then thesecurityOrigin
also has to be specified.
webFrame.getResourceUsage()
戻り値 Object
:
images
MemoryUsageDetailsscripts
MemoryUsageDetailscssStyleSheets
MemoryUsageDetailsxslStyleSheets
MemoryUsageDetailsfonts
MemoryUsageDetailsother
MemoryUsageDetails
Blink の内部メモリキャッシュの使用情報を記述しているオブジェクトを返します。
const { webFrame } = require('electron')
console.log(webFrame.getResourceUsage())
これが生成されます。
{
images: {
count: 22,
size: 2549,
liveSize: 2542
},
cssStyleSheets: { /* "images" と同じ */ },
xslStyleSheets: { /* "images" と同じ */ },
fonts: { /* "images" と同じ */ },
other: { /* "images" と同じ" */ }
}
webFrame.clearCache()
以前使用していたメモリを解放しようとします (以前のナビゲーションの画像など)。
このメソッドを盲目的に呼び出すと、空になったキャッシュを補充する必要があるため、Electron の処理速度が遅くなる可能性があることに注意してください。アプリ内のイベントが発生してページの実際のメモリ使用量が少なくなったと思われる場合にのみ呼び出すようにしてください (即ち、とても重いページから空のページへナビゲートし、そこにとどまるとき)。
webFrame.getFrameForSelector(selector)
selector
string - フレーム要素の CSS セレクタ。
戻り値 WebFrame | null
- selector
によって選択された webFrame
のドキュメント。selector
がフレームを選択していないか現在のレンダラープロセスにそのフレームがない場合、null
が返されます。
webFrame.findFrameByName(name)
name
string
戻り値 WebFrame | null
- 与えられた name
である webFrame
の子。そのようなフレームが存在しないか現在のレンダラープロセスにそのフレームがない場合、null
が返されます。
webFrame.findFrameByRoutingId(routingId)
非推奨
routingId
Integer - 現在のレンダラープロセスでの一意なフレーム ID を表すInteger
。 ルーティング ID はWebFrame
インスタンス (webFrame.routingId
) や、フレーム特有のWebContents
ナビゲーションイベント (did-frame-navigate
など) から取得できます。
戻り値 WebFrame | null
- 渡された routingId
のもの。見つからなければ null
。
Deprecated: Use the new webFrame.findFrameByToken
API.
webFrame.findFrameByToken(frameToken)
frameToken
string - Astring
representing the unique frame id in the current renderer process. Frame tokens can be retrieved fromWebFrame
instances (webFrame.frameToken
) and can also be retrieved fromWebFrameMain
instances usingwebFrameMain.frameToken
.
戻り値 WebFrame | null
- 渡された frameToken
のもの。見つからなければ null
。
webFrame.isWordMisspelled(word)
word
string - スペルチェックされる単語。
戻り値 boolean
- 組み込みスペルチェッカーでスペルミスを検知した場合は true、そうでない場合は false です。 辞書が読み込まれていない場合は、常に false を返します。
webFrame.getWordSuggestions(word)
word
string - スペルミスのある単語。
戻り値 string[]
- 指定の単語に対する候補のリスト。 単語のスペルが正しければ、結果は空です。
プロパティ
webFrame.top
読み出し専用
webFrame
が属するフレーム階層内のトップフレームを表す WebFrame | null
。トップフレームが現在のレンダラープロセスにない場合、プロパティは null
になります。
webFrame.opener
読み出し専用
webFrame
が開かれたフレームを表す WebFrame | null
。開いたフレームが存在しないか現在のレンダラープロセスにない場合、プロパティは null
になります。
webFrame.parent
読み出し専用
webFrame
の親フレームを表す WebFrame | null
。webFrame
がトップフレームか現在のレンダラープロセスにない場合、プロパティは null
になります。
webFrame.firstChild
読み出し専用
webFrame
の最初の子フレームを表す WebFrame | null
。webFrame
に子フレームが存在しないか現在のレンダラープロセスにない場合、プロパティは null
になります。
webFrame.nextSibling
読み出し専用
次の兄弟フレームを表す WebFrame | null
。webFrame
がその親の最後の子フレームか、次の兄弟フレームが現在のレンダラープロセスにない場合、プロパティは null
になります。
webFrame.routingId
Readonly Deprecated
現在のレンダラープロセスでの一意なフレーム ID を表す Integer
。 同じ基底フレームを参照する WebFrame インスタンスは、同じ routingId
を持ちます。
Deprecated: Use the new webFrame.frameToken
API.
webFrame.frameToken
読み出し専用
A string
representing the unique frame token in the current renderer process. 同じ基底フレームを参照する WebFrame インスタンスは、同じ frameToken
を持ちます。