sidebar_label: Frame

Frame class

Represents a DOM frame.

To understand frames, you can think of frames as <iframe> elements. Just like iframes, frames can be nested, and when JavaScript is executed in a frame, the JavaScript does not affect frames inside the ambient frame the JavaScript executes in.

Signature

export declare abstract class Frame extends EventEmitter<FrameEvents>

Extends: EventEmitter<FrameEvents>

Remarks

Frame lifecycles are controlled by three events that are all dispatched on the parent page:

• PageEvent.FrameAttached - PageEvent.FrameNavigated - PageEvent.FrameDetached

The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the Frame class.

Example 1

At any point in time, pages expose their current frame tree via the Page.mainFrame() and Frame.childFrames() methods.

Example 2

An example of dumping frame tree:

import puppeteer from 'puppeteer';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com/chrome/browser/canary.html');
  dumpFrameTree(page.mainFrame(), '');
  await browser.close();

  function dumpFrameTree(frame, indent) {
    console.log(indent + frame.url());
    for (const child of frame.childFrames()) {
      dumpFrameTree(child, indent + '  ');
    }
  }
})();

Example 3

An example of getting text from an iframe element:

const frames = page.frames();
let frame = null;
for (const currentFrame of frames) {
  const frameElement = await currentFrame.frameElement();
  const name = await frameElement.evaluate(el => el.getAttribute('name'));
  if (name === 'myframe') {
    frame = currentFrame;
    break;
  }
}
if (frame) {
  const text = await frame.$eval('.selector', element => element.textContent);
  console.log(text);
} else {
  console.error('Frame with name "myframe" not found.');
}

Properties

Methods