webFrame

現在のウェブページの描画をカスタマイズします。

[!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 number
maximumLevel 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 string
provider Object
- spellCheck Function
  - words string[]
  - callback Function
    - misspeltWords 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
options Object (任意)
- cssOrigin string (任意) - 'user' か 'author' にできます。挿入されるスタイルシートのカスケードのオリジンを設定します。既定値は 'author' です。

戻り値 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 string
userGesture boolean (任意) - 省略値は false。
callback Function (任意) - スクリプトの実行後に呼び出されます。フレームがサスペンド (モーダルアラートの表示など) されない限り、実行は同期的に行われ、メソッドから戻る前にコールバックが呼び出されます。このメソッドは古いバージョンとの互換性のため、エラーが第 2 引数です。
- result Any
- error 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 Any
- error 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 Object
- securityOrigin string (任意) - 隔離された空間のためのセキュリティオリジン
- csp string (任意) - 隔離された空間のためのコンテンツセキュリティポリシー
- name string (任意) - 隔離されたワールドの名前。デベロッパーツールで役立ちます。

隔離されたワールドのセキュリティオリジン、コンテンツセキュリティポリシー、名前を設定します。

[!NOTE] If the csp is specified, then the securityOrigin also has to be specified.

`webFrame.getResourceUsage()`

戻り値 Object:

images MemoryUsageDetails
scripts MemoryUsageDetails
cssStyleSheets MemoryUsageDetails
xslStyleSheets MemoryUsageDetails
fonts MemoryUsageDetails
other 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 - A string representing the unique frame id in the current renderer process. Frame tokens can be retrieved from WebFrame instances (webFrame.frameToken) and can also be retrieved from WebFrameMain instances using webFrameMain.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 を持ちます。

メソッド​

webFrame.setZoomFactor(factor)​

webFrame.getZoomFactor()​

webFrame.setZoomLevel(level)​

webFrame.getZoomLevel()​

webFrame.setVisualZoomLevelLimits(minimumLevel, maximumLevel)​

webFrame.setSpellCheckProvider(language, provider)​

webFrame.insertCSS(css[, options])​

webFrame.removeInsertedCSS(key)​

webFrame.insertText(text)​

webFrame.executeJavaScript(code[, userGesture][, callback])​

webFrame.executeJavaScriptInIsolatedWorld(worldId, scripts[, userGesture][, callback])​

webFrame.setIsolatedWorldInfo(worldId, info)​

webFrame.getResourceUsage()​

webFrame.clearCache()​

webFrame.getFrameForSelector(selector)​

webFrame.findFrameByName(name)​

webFrame.findFrameByRoutingId(routingId) 非推奨​

webFrame.findFrameByToken(frameToken)​

webFrame.isWordMisspelled(word)​

webFrame.getWordSuggestions(word)​

プロパティ​

webFrame.top 読み出し専用​

webFrame.opener 読み出し専用​

webFrame.parent 読み出し専用​

webFrame.firstChild 読み出し専用​

webFrame.nextSibling 読み出し専用​

webFrame.routingId Readonly Deprecated​

webFrame.frameToken 読み出し専用​