webFrameMain | Electron メインコンテンツへ飛ぶ Electron ドキュメント API ブログ ツール * Electron Forge * Electron Fiddle コミュニティ * ガバナンス * 事例紹介 * リソース リリース 日本語 * English * Deutsch * Español * Français * 日本語 * Português * Русский * 中文 検索 * メインプロセスモジュール * app * autoUpdater * BaseWindow * BrowserView * Deprecated * BrowserWindow * clipboard * contentTracing * crashReporter * desktopCapturer * dialog * globalShortcut * ImageView * inAppPurchase * ipcMain * Menu * MenuItem * MessageChannelMain * MessagePortMain * nativeImage * nativeTheme * net * netLog * Notification * powerMonitor * powerSaveBlocker * process * protocol * pushNotifications * safeStorage * screen * session * sharedTexture * ShareMenu * shell * systemPreferences * TouchBar * Tray * utilityProcess * webContents * WebContentsView * webFrameMain * 表示 * レンダラープロセスモジュール * Utility Process Modules * カスタム DOM 要素 * Chromium と Node.js * クラス * API の構造体 * * メインプロセスモジュール * webFrameMain 目次 webFrameMain ウェブページと iframe を制御します。 プロセス: メイン webFrameMain モジュールは、既存の WebContents インスタンスを横断したフレームの探索に利用できます。 ナビゲーションイベントがよくあるユースケースでしょう。 const { BrowserWindow , webFrameMain } = require ( 'electron' ) const win = new BrowserWindow ( { width : 800 , height : 1500 } ) win . loadURL ( 'https://twitter.com' ) win . webContents . on ( 'did-frame-navigate' , ( event , url , httpResponseCode , httpStatusText , isMainFrame , frameProcessId , frameRoutingId ) => { const frame = webFrameMain . fromId ( frameProcessId , frameRoutingId ) if ( frame ) { const code = 'document.body.innerHTML = document.body.innerHTML.replaceAll("heck", "h*ck")' frame . executeJavaScript ( code ) } } ) また、 WebContents の mainFrame プロパティを使用することでも既存ページのフレームへアクセスできます。 const { BrowserWindow } = require ( 'electron' ) async function main ( ) { const win = new BrowserWindow ( { width : 800 , height : 600 } ) await win . loadURL ( 'https://reddit.com' ) const youtubeEmbeds = win . webContents . mainFrame . frames . filter ( ( frame ) => { try { const url = new URL ( frame . url ) return url . host === 'www.youtube.com' } catch { return false } } ) console . log ( youtubeEmbeds ) } main ( ) メソッド ​ これらのメソッドは、 webFrameMain モジュールからアクセスできます。 webFrameMain.fromId(processId, routingId) ​ * processId Integer - Integer 型で、そのフレームを所有しているプロセスの内部 ID を表します。 * routingId Integer - Integer 型で、現在のレンダラープロセスでの一意なフレーム ID を表します。 ルーティング ID は、 WebFrameMain インスタンス ( frame.routingId ) から取得できるほか、フレーム固有の WebContents ナビゲーションイベント ( did-frame-navigate など) によっても渡されます。 戻り値 WebFrameMain | undefined - 指定のプロセスとルーティングの ID のフレームです。指定の ID に関連付けられた WebFrameMain がない場合は undefined になります。 webFrameMain.fromFrameToken(processId, frameToken) ​ * processId Integer - Integer 型で、そのフレームを所有しているプロセスの内部 ID を表します。 * frameToken string - string 型で、フレームを一意に識別するトークンです。 レンダラープロセスで webFrame.frameToken を介して取得することもできます。 戻り値 WebFrameMain | null - 指定されたプロセスとフレームのトークンを持つフレーム。指定の ID に関連付けられた WebFrameMain がない場合は null になります。 クラス: WebFrameMain ​ プロセス: メイン このクラスは 'electron' モジュールからはエクスポートされません。 Electron API では、他のメソッドの戻り値としてのみ利用できます。 インスタンスイベント ​ イベント: 'dom-ready' ​ document が読み込まれたときに発生します インスタンスメソッド ​ frame.executeJavaScript(code[, userGesture]) ​ * code string * userGesture boolean (任意) - 省略値は false 。 戻り値 Promise<unknown> - Promise 型で、コードの実行結果で解決され、実行で例外の送出または実行結果が拒否された Promise の場合は拒否されます。 ページ内の code を評価します。 ブラウザウインドウでは、 requestFullScreen のような、いくつかの HTML API は、ユーザからのジェスチャーでのみ呼び出されます。 userGesture を true にセットすることでこの制限がなくなります。 frame.reload() ​ 戻り値 boolean - リロードが正常に開始されたかどうか。 フレームに履歴がない場合のみ false になります。 frame.isDestroyed() ​ 戻り値 boolean - フレームが破棄されているかどうか。 frame.send(channel, ...args) ​ * channel string * ...args any[] 引数と共に、 channel を介してレンダラープロセスに非同期メッセージを送信します。 引数は postMessage と同じように 構造化複製アルゴリズム によってシリアライズされるため、プロトタイプチェーンは含まれません。 関数、Promise、Symbol、WeakMap、WeakSet の送信は、例外が送出されます。 レンダラープロセスは ipcRenderer モジュールで channel を聞いてメッセージを処理できます。 frame.postMessage(channel, message, [transfer]) ​ * channel string * message any * transfer MessagePortMain[] (任意) メッセージをレンダラープロセスに送信し、任意でゼロ個以上の MessagePortMain オブジェクトの所有権を転送します。 転送された MessagePortMain オブジェクトは、レンダラープロセスで発生したイベントの ports プロパティにアクセスすれば利用できます。 レンダラーに着くと、それらはネイティブの DOM MessagePort オブジェクトになります。 以下がその例です。 // メインプロセス const win = new BrowserWindow ( ) const { port1 , port2 } = new MessageChannelMain ( ) win . webContents . mainFrame . postMessage ( 'port' , { message : 'hello' } , [ port1 ] ) // レンダラープロセス ipcRenderer . on ( 'port' , ( e , msg ) => { const [ port ] = e . ports // ... } ) frame.collectJavaScriptCallStack() 実験的 ​ 戻り値 Promise<string> | Promise<void> - 現在実行中の JavaScript 呼び出しのスタックで解決される Promise。 フレーム内で JavaScript が実行されない場合、Promise は解決されません。 コールスタックを収集できない場合は、 undefined を返します。 これは、JavaScript が長時間実行されている場合にフレームが応答しない理由を特定するのに役立ちます。 詳細については、 プロポーザルのクラッシュレポート API をご参照ください。 const { app } = require ( 'electron' ) app . commandLine . appendSwitch ( 'enable-features' , 'DocumentPolicyIncludeJSCallStacksInCrashReports' ) app . on ( 'web-contents-created' , ( _ , webContents ) => { webContents . on ( 'unresponsive' , async ( ) => { // 実行を中断し、応答しないレンダラーからコールスタックを収集します const callStack = await webContents . mainFrame . collectJavaScriptCallStack ( ) console . log ( 'Renderer unresponsive\n' , callStack ) } ) } ) frame.copyVideoFrameAt(x, y) ​ * x Integer * y Integer When executed on a video media element, copies the frame at (x, y) to the clipboard. frame.saveVideoFrameAs(x, y) ​ * x Integer * y Integer When executed on a video media element, shows a save dialog and saves the frame at (x, y) to disk. frame.printToPDF(options) ​ History Version(s) Changes None API ADDED * options PrintToPDFOptions * landscape boolean (optional) - Paper orientation. true for landscape, false for portrait. 省略値は、false です。 * displayHeaderFooter boolean (optional) - Whether to display header and footer. 省略値は、false です。 * printBackground boolean (optional) - Whether to print background graphics. 省略値は、false です。 * scale number(optional) - Scale of the webpage rendering. 省略値は 1 です。 * pageSize string | Size (optional) - Specify page size of the generated PDF. Can be A0 , A1 , A2 , A3 , A4 , A5 , A6 , Legal , Letter , Tabloid , Ledger , or an Object containing height and width in inches. Defaults to Letter . * margins PrintToPDFMargins (optional) * top number (optional) - Top margin in inches. 省略値は 1cm (約 0.4 インチ) です。 * bottom number (optional) - Bottom margin in inches. 省略値は 1cm (約 0.4 インチ) です。 * left number (optional) - Left margin in inches. 省略値は 1cm (約 0.4 インチ) です。 * right number (optional) - Right margin in inches. 省略値は 1cm (約 0.4 インチ) です。 * pageRanges string (optional) - Page ranges to print, e.g., '1-5, 8, 11-13'. 省略値は空の文字列で、これは全ページを印刷します。 * headerTemplate string (optional) - HTML template for the print header. Should be valid HTML markup with following classes used to inject printing values into them: date (formatted print date), title (document title), url (document location), pageNumber (current page number) and totalPages (total pages in the document). For example, <span class=title></span> would generate span containing the title. * footerTemplate string (optional) - HTML template for the print footer. Should use the same format as the headerTemplate . * preferCSSPageSize boolean (optional) - Whether or not to prefer page size as defined by css. 省略値は false で、その場合コンテンツは用紙サイズに合うように拡大縮小されます。 * generateTaggedPDF boolean (optional) Experimental - Whether or not to generate a tagged (accessible) PDF. 省略値は、false です。 このプロパティは実験的なものであるため、生成された PDF は PDF/UA および WCAG 標準に完全に準拠していないおそれがあります。 * generateDocumentOutline boolean (optional) Experimental - Whether or not to generate a PDF document outline from content headers. 省略値は、false です。 戻り値 Promise<Buffer> - 生成された PDF データで実行されます。 Prints the frame's web page as PDF. Unlike webContents.printToPDF , this method prints only the contents of the frame it is called on. This can be used to print an individual <iframe> from the main process. @page CSS ルールがウェブページ内で使われている場合、 landscape は無視されます。 An example of printing an iframe to PDF: const { app , BrowserWindow } = require ( 'electron' ) const fs = require ( 'node:fs' ) const os = require ( 'node:os' ) const path = require ( 'node:path' ) app . whenReady ( ) . then ( ( ) => { const win = new BrowserWindow ( ) win . loadFile ( 'page-with-iframe.html' ) win . webContents . on ( 'did-finish-load' , ( ) => { const pdfPath = path . join ( os . homedir ( ) , 'Desktop' , 'iframe.pdf' ) const iframe = win . webContents . mainFrame . frames [ 0 ] iframe . printToPDF ( { } ) . then ( data => { fs . writeFile ( pdfPath , data , ( error ) => { if ( error ) throw error console . log ( ` Wrote PDF successfully to ${ pdfPath } ` ) } ) } ) . catch ( error => { console . log ( ` Failed to write PDF to ${ pdfPath } : ` , error ) } ) } ) } ) 詳細は Page.printToPdf をご覧ください。 インスタンスプロパティ ​ frame.ipc 読み出し専用 ​ そのフレームに範囲が限定された IpcMain インスタンス。 ipcRenderer.send 、 ipcRenderer.sendSync や ipcRenderer.postMessage で送信した IPC メッセージは以下の順番で伝達されます。 * contents.on('ipc-message') * contents.mainFrame.on(channel) * contents.ipc.on(channel) * ipcMain.on(channel) invoke で登録されたハンドラは以下の順番で確認されます。 最初に定義されているものが呼び出され, 以降は無視されます。 * contents.mainFrame.handle(channel) * contents.handle(channel) * ipcMain.handle(channel) ほとんどの場合、WebContents のメインフレームだけが IPC メッセージを送受信できます。 しかし、 nodeIntegrationInSubFrames オプションが有効の場合、子フレームも IPC メッセージを送受信できます。 nodeIntegrationInSubFrames が無効の場合、 WebContents.ipc インターフェイスの方が便利な場合があります。 frame.url 読み出し専用 ​ string 型で、そのフレームの現在の URL を表します。 frame.origin 読み出し専用 ​ string 型で、そのフレームの現在のオリジンを表し、 RFC 6454 によってシリアライズされています。 これは URL と異なることがあります。 例えばフレームが about:blank で開かれた子ウィンドウの場合、 frame.origin は親フレームのオリジンを返し、 frame.url は空文字列を返します。 スキーム/ホスト/ポートのトリプルオリジンを持たないページは、シリアライズされたオリジンが "null" (すなわち文字 n, u, l, l が入った文字列) となります。 frame.top 読み出し専用 ​ WebFrameMain | null 型で、 frame が属するフレーム階層の最上位フレームを表します。 frame.parent 読み出し専用 ​ WebFrameMain | null 型で、 frame の親フレームを表します。 frame がそのフレーム階層の最上位フレームであれば、このプロパティは null です。 frame.frames 読み出し専用 ​ WebFrameMain[] 型で、 frame の直接の子フレームを格納するコレクションです。 frame.framesInSubtree 読み出し専用 ​ WebFrameMain[] 型で、 frame のサブツリーのうち自身を含んだ全フレームのコレクションです。 これは、すべてのフレームをトラバースするときに便利です。 frame.frameTreeNodeId 読み出し専用 ​ Integer 型で、フレーム内部の FrameTreeNode インスタンスの ID を表します。 この ID はブラウザー内で共通となっており、コンテンツをホストするフレームを一意に識別します。 識別子はフレーム作成時に固定され、フレームが有効である間は変化しません。 フレームが削除されると、その ID が再び使用されることはありません。 frame.name 読み出し専用 ​ string 型で、そのフレームの名前を表します。 frame.frameToken 読み出し専用 ​ string 型で、関連レンダラープロセス内でフレームを一意に識別します。 これは webFrame.frameToken と等価です。 frame.osProcessId 読み出し専用 ​ Integer 型で、このフレームを所有するプロセスのオペレーティングシステムの pid を表します。 frame.processId 読み出し専用 ​ Integer 型で、このフレームを所有するプロセスの Chromium 内部の pid を表します。 これは OS のプロセス ID と同じではありません。それを読み出すには frame.osProcessId を使用してください。 frame.routingId 読み出し専用 ​ 現在のレンダラープロセスでの一意なフレーム ID を表す Integer 。 同じ基底フレームを参照する WebFrameMain インスタンスすべては、それぞれ同じ routingId になります。 frame.visibilityState 読み出し専用 ​ string 型で、そのフレームの 可視性の状態 を表します。 ページ可視性 API が他の Electron API から受ける影響についてもご覧ください。 frame.detached 読み出し専用 ​ Boolean 型で、フレームがフレームツリーから切り離されているかどうかを表します。 対応するページで unload リスナーが実行されているときにフレームにアクセスすると、フレームツリー内で新しくナビゲーションされたページがフレームを置き換えるため、フレームが切り離される可能性があります。 このページを編集 前 WebContentsView 次 表示 * メソッド * fromId * fromFrameToken * クラス: WebFrameMain * インスタンスイベント * イベント: 'dom-ready' * インスタンスメソッド * executeJavaScript * reload * isDestroyed * send * postMessage * collectJavaScriptCallStack * copyVideoFrameAt * saveVideoFrameAs * printToPDF * インスタンスプロパティ * ipc * url * origin * top * parent * frames * framesInSubtree * frameTreeNodeId * name * frameToken * osProcessId * processId * routingId * visibilityState * detached ドキュメント * 始めましょう * 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