electron/docs/api/web-frame-main.md

webFrameMain

Control web pages and iframes.

Process: Main

The webFrameMain module can be used to lookup frames across existing WebContents instances. Navigation events are the common use case.

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, 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)
    }
  }
)

You can also access frames of existing pages by using the webFrame property of WebContents.

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()

Methods

These methods can be accessed from the webFrameMain module:

webFrameMain.fromId(processId, routingId)

• processId Integer - An Integer representing the id of the process which owns the frame.
• routingId Integer - An Integer representing the unique frame id in the current renderer process. Routing IDs can be retrieved from WebFrameMain instances (frame.routingId) and are also passed by frame specific WebContents navigation events (e.g. did-frame-navigate).

Returns WebFrameMain - A frame with the given process and routing IDs.

Class: WebFrameMain

Process: Main

Instance Methods

frame.executeJavaScript(code[, userGesture])

• code String
• userGesture Boolean (optional) - Default is false.

Returns Promise<unknown> - A promise that resolves with the result of the executed code or is rejected if execution throws or results in a rejected promise.

Evaluates code in page.

In the browser window some HTML APIs like requestFullScreen can only be invoked by a gesture from the user. Setting userGesture to true will remove this limitation.

frame.reload()

Returns boolean - Whether the reload was initiated successfully. Only results in false when the frame has no history.

Instance Properties

frame.url Readonly

A string representing the current URL of the frame.

frame.top Readonly

A WebFrameMain | null representing top frame in the frame hierarchy to which frame belongs.

frame.parent Readonly

A WebFrameMain | null representing parent frame of frame, the property would be null if frame is the top frame in the frame hierarchy.

frame.frames Readonly

A WebFrameMain[] collection containing the direct descendents of frame.

frame.framesInSubtree Readonly

A WebFrameMain[] collection containing every frame in the subtree of frame, including itself. This can be useful when traversing through all frames.

frame.frameTreeNodeId Readonly

An Integer representing the id of the frame's internal FrameTreeNode instance. This id is browser-global and uniquely identifies a frame that hosts content. The identifier is fixed at the creation of the frame and stays constant for the lifetime of the frame. When the frame is removed, the id is not used again.

frame.processId Readonly

An Integer representing the id of the process which owns this frame.

frame.routingId Readonly

An Integer representing the unique frame id in the current renderer process. Distinct WebFrameMain instances that refer to the same underlying frame will have the same routingId.