メインコンテンツにスキップ

webFrameMain

Webページと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 - フレームを所有するプロセスの内部IDを表すInteger。
  • routingId Integer - 現在のレンダラープロセス内の一意のフレームIDを表すInteger。ルーティングIDは、WebFrameMainインスタンス（frame.routingId）から取得でき、フレーム固有のWebContentsナビゲーションイベント（例: did-frame-navigate）でも渡されます。

戻り値 WebFrameMain | undefined - 指定されたプロセスとルーティングIDを持つフレーム。または、指定されたIDに関連付けられたWebFrameMainがない場合はundefined。

クラス: WebFrameMain​

プロセス: メイン
このクラスは、'electron'モジュールからエクスポートされません。Electron APIの他のメソッドの戻り値としてのみ利用可能です。

インスタンスイベント​

イベント: 'dom-ready'​

ドキュメントが読み込まれたときに発生します。

インスタンスメソッド​

frame.executeJavaScript(code[, userGesture])​

  • code string
  • userGesture boolean (オプション) - デフォルトはfalseです。

戻り値 Promise<unknown> - 実行されたコードの結果で解決されるプロミス。または、実行がスローされるか、拒否されたプロミスになる場合は拒否されます。

ページ内でcodeを評価します。

ブラウザウィンドウでは、requestFullScreenのような一部のHTML APIは、ユーザーからのジェスチャによってのみ呼び出すことができます。userGestureをtrueに設定すると、この制限が解除されます。

frame.reload()​

戻り値 boolean - リロードが正常に開始されたかどうか。フレームに履歴がない場合のみfalseになります。

frame.send(channel, ...args)​

  • channel string
  • ...args any[]

引数とともに、channelを介して非同期メッセージをレンダラープロセスに送信します。引数は、構造化クローンアルゴリズムでシリアライズされます。postMessageと同じように、プロトタイプチェーンは含まれません。関数、プロミス、シンボル、WeakMap、またはWeakSetを送信すると例外がスローされます。

レンダラープロセスは、ipcRendererモジュールでchannelをリッスンすることにより、メッセージを処理できます。

frame.postMessage(channel, message, [transfer])​

  • channel string
  • message any
  • transfer MessagePortMain[] (オプション)

0個以上のMessagePortMainオブジェクトの所有権をオプションで譲渡して、メッセージをレンダラープロセスに送信します。

譲渡されたMessagePortMainオブジェクトは、発行されたイベントのportsプロパティにアクセスすることにより、レンダラープロセスで利用可能になります。レンダラーに到着すると、それらはネイティブDOM MessagePortオブジェクトになります。

例:

// Main process
const win = new BrowserWindow()
const { port1, port2 } = new MessageChannelMain()
win.webContents.mainFrame.postMessage('port', { message: 'hello' }, [port1])

// Renderer process
ipcRenderer.on('port', (e, msg) => {
  const [port] = e.ports
  // ...
})

インスタンスプロパティ​

frame.ipc 読み取り専用​

フレームにスコープされたIpcMainインスタンス。

ipcRenderer.send、ipcRenderer.sendSync、またはipcRenderer.postMessageで送信されたIPCメッセージは、次の順序で配信されます

  1. contents.on('ipc-message')
  2. contents.mainFrame.on(channel)
  3. contents.ipc.on(channel)
  4. ipcMain.on(channel)

invokeで登録されたハンドラーは、次の順序でチェックされます。最初に定義されたものが呼び出され、残りは無視されます。

  1. contents.mainFrame.handle(channel)
  2. contents.handle(channel)
  3. ipcMain.handle(channel)

ほとんどの場合、WebContentsのメインフレームのみがIPCメッセージを送受信できます。ただし、nodeIntegrationInSubFramesオプションが有効になっている場合、子フレームもIPCメッセージを送受信できます。WebContents.ipcインターフェイスは、nodeIntegrationInSubFramesが有効になっていない場合に便利です。

frame.url 読み取り専用​

フレームの現在のURLを表すstring。

frame.origin 読み取り専用​

RFC 6454に従ってシリアル化された、フレームの現在のオリジンを表すstring。これはURLとは異なる場合があります。たとえば、フレームがabout:blankで開かれた子ウィンドウである場合、frame.originは親フレームのオリジンを返し、frame.urlは空の文字列を返します。スキーム/ホスト/ポートのトリプルオリジンを持たないページでは、シリアル化されたオリジンが"null"になります（つまり、文字n、u、l、lを含む文字列）。

frame.top 読み取り専用​

frameが属するフレーム階層の最上位フレームを表すWebFrameMain | null。

frame.parent 読み取り専用​

frameの親フレームを表すWebFrameMain | null。frameがフレーム階層の最上位フレームである場合は、プロパティはnullになります。

frame.frames 読み取り専用​

frameの直接の子孫を含むWebFrameMain[]コレクション。

frame.framesInSubtree 読み取り専用​

frameのサブツリー内のすべてのフレーム（それ自身を含む）を含むWebFrameMain[]コレクション。これは、すべてのフレームを走査するときに役立ちます。

frame.frameTreeNodeId 読み取り専用​

フレームの内部FrameTreeNodeインスタンスのIDを表すInteger。このIDはブラウザ全体でグローバルであり、コンテンツをホストするフレームを一意に識別します。識別子はフレームの作成時に固定され、フレームの存続期間中は一定です。フレームが削除されると、IDは二度と使用されません。

frame.name 読み取り専用​

フレーム名を表すstring。

frame.osProcessId 読み取り専用​

このフレームを所有するプロセスのオペレーティングシステムの pid を表す Integer です。

frame.processId 読み取り専用​

このフレームを所有するプロセスの Chromium 内部の pid を表す Integer です。これは OS のプロセス ID とは異なります。OS のプロセス ID を読み取るには、frame.osProcessId を使用してください。

frame.routingId 読み取り専用​

現在のレンダラープロセスにおける一意のフレーム ID を表す Integer です。同じ基盤となるフレームを参照する異なる WebFrameMain インスタンスは、同じ routingId を持ちます。

frame.visibilityState 読み取り専用​

フレームの可視性状態を表す文字列です。

ページ可視性 APIが他の Electron API にどのように影響されるかについても参照してください。