webFrame | Electron メインコンテンツへ飛ぶ Electron ドキュメント API ブログ ツール * Electron Forge * Electron Fiddle コミュニティ * ガバナンス * 事例紹介 * リソース リリース 日本語 * English * Deutsch * Español * Français * 日本語 * Português * Русский * 中文 検索 * メインプロセスモジュール * レンダラープロセスモジュール * clipboard * contextBridge * crashReporter * ipcRenderer * nativeImage * webFrame * webUtils * Utility Process Modules * カスタム DOM 要素 * Chromium と Node.js * クラス * API の構造体 * * レンダラープロセスモジュール * webFrame 目次 webFrame 現在のウェブページの描画をカスタマイズします。 プロセス: レンダラー [!IMPORTANT] コンテキスト分離を有効にしてレンダラープロセスからこの API を呼び出す場合は、プリロードスクリプトに API 呼び出しを記述し、 contextBridge API でその 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] Chromium でのズームポリシーはドメインごとです。すなわち、特定ドメインのズームレベルは、同じドメインのウィンドウの全インスタンスに伝播します。 ウインドウの URL が別々であれば、ウインドウごとのズームになります。 webFrame.getZoomLevel() ​ 戻り値 number - 現在の拡大レベル。 webFrame.setVisualZoomLevelLimits(minimumLevel, maximumLevel) ​ * minimumLevel number * maximumLevel number ピンチによる拡大レベルの最大値と最小値を設定します。 [!NOTE] Electron ではデフォルトで視覚ズームは無効化されています。 再び有効にする場合は以下を呼び出します。 webFrame . setVisualZoomLevelLimits ( 1 , 3 ) [!NOTE] 視覚ズームはピンチによるズームの動作でのみ適用されます。 Cmd+/-/0 ズームのショートカットは、それぞれアプリケーションの Menu の 'zoomIn'、'zoomOut'、'resetZoom' の MenuItem ロールで制御されます。 ショートカットを無効にするには、手動で メニューの定義 を行い、定義からズームのロールを除きます。 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 (任意) - 隔離されたワールドの名前。 Useful in DevTools. 隔離されたワールドのセキュリティオリジン、コンテンツセキュリティポリシー、名前を設定します。 note csp が指定されている場合は、 securityOrigin も指定する必要があります。 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 。 非推奨: 新しい webFrame.findFrameByToken API を使用してください。 webFrame.findFrameByToken(frameToken) ​ * frameToken string - string 型で、現在のレンダラープロセスでの一意なフレーム ID を表します。 フレームのトークンは、 WebFrame インスタンス ( webFrame.frameToken ) から取得できます。また、 webFrameMain.frameToken を使用して WebFrameMain インスタンスから取得することもできます。 戻り値 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 読み出し専用 非推奨 ​ 現在のレンダラープロセスでの一意なフレーム ID を表す Integer 。 同じ基底フレームを参照する WebFrame インスタンスは、同じ routingId を持ちます。 非推奨: 新しい webFrame.frameToken API を使用してください。 webFrame.frameToken 読み出し専用 ​ string 型で、現在のレンダラープロセスでの一意なフレームのトークンを表します。 同じ基底フレームを参照する WebFrame インスタンスは、同じ frameToken を持ちます。 このページを編集 前 nativeImage 次 webUtils * メソッド * setZoomFactor * getZoomFactor * setZoomLevel * getZoomLevel * setVisualZoomLevelLimits * setSpellCheckProvider * insertCSS * removeInsertedCSS * insertText * executeJavaScript * executeJavaScriptInIsolatedWorld * setIsolatedWorldInfo * getResourceUsage * clearCache * getFrameForSelector * findFrameByName * findFrameByRoutingId * findFrameByToken * isWordMisspelled * getWordSuggestions * プロパティ * top * opener * parent * firstChild * nextSibling * routingId * frameToken ドキュメント * 始めましょう * 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