puppeteer/assets/js/d556bab5.08f0445c.js

/*! For license information please see d556bab5.08f0445c.js.LICENSE.txt */
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[91550],{43221:(e,r,t)=>{t.r(r),t.d(r,{assets:()=>l,contentTitle:()=>i,default:()=>p,frontMatter:()=>a,metadata:()=>d,toc:()=>c});var s=t(85893),n=t(11151);const a={sidebar_label:"Frame"},i="Frame class",d={id:"api/puppeteer.frame",title:"Frame class",description:"Represents a DOM frame.",source:"@site/versioned_docs/version-22.0.0/api/puppeteer.frame.md",sourceDirName:"api",slug:"/api/puppeteer.frame",permalink:"/api/puppeteer.frame",draft:!1,unlisted:!1,tags:[],version:"22.0.0",frontMatter:{sidebar_label:"Frame"},sidebar:"api",previous:{title:"ConsoleMessage.type",permalink:"/api/puppeteer.consolemessage.type"},next:{title:"Frame.$",permalink:"/api/puppeteer.frame._"}},l={},c=[{value:"Signature:",id:"signature",level:4},{value:"Remarks",id:"remarks",level:2},{value:"Example 1",id:"example-1",level:2},{value:"Example 2",id:"example-2",level:2},{value:"Example 3",id:"example-3",level:2},{value:"Properties",id:"properties",level:2},{value:"Methods",id:"methods",level:2}];function h(e){const r={a:"a",code:"code",h1:"h1",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,n.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r.h1,{id:"frame-class",children:"Frame class"}),"\n",(0,s.jsx)(r.p,{children:"Represents a DOM frame."}),"\n",(0,s.jsxs)(r.p,{children:["To understand frames, you can think of frames as ",(0,s.jsx)(r.code,{children:"<iframe>"})," elements. Just like iframes, frames can be nested, and when JavaScript is executed in a frame, the JavaScript does not effect frames inside the ambient frame the JavaScript executes in."]}),"\n",(0,s.jsx)(r.h4,{id:"signature",children:"Signature:"}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-typescript",children:"export declare abstract class Frame extends EventEmitter<FrameEvents>\n"})}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.strong,{children:"Extends:"})," ",(0,s.jsx)(r.a,{href:"/api/puppeteer.eventemitter",children:"EventEmitter"}),"<",(0,s.jsx)(r.a,{href:"/api/puppeteer.frameevents",children:"FrameEvents"}),">"]}),"\n",(0,s.jsx)(r.h2,{id:"remarks",children:"Remarks"}),"\n",(0,s.jsxs)(r.p,{children:["Frame lifecycles are controlled by three events that are all dispatched on the parent ",(0,s.jsx)(r.a,{href:"/api/puppeteer.frame.page",children:"page"}),":"]}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsxs)(r.li,{children:[(0,s.jsx)(r.a,{href:"/api/puppeteer.pageevent",children:"PageEvent.FrameAttached"})," - ",(0,s.jsx)(r.a,{href:"/api/puppeteer.pageevent",children:"PageEvent.FrameNavigated"})," - ",(0,s.jsx)(r.a,{href:"/api/puppeteer.pageevent",children:"PageEvent.FrameDetached"})]}),"\n"]}),"\n",(0,s.jsxs)(r.p,{children:["The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the ",(0,s.jsx)(r.code,{children:"Frame"})," class."]}),"\n",(0,s.jsx)(r.h2,{id:"example-1",children:"Example 1"}),"\n",(0,s.jsxs)(r.p,{children:["At any point in time, ",(0,s.jsx)(r.a,{href:"/api/puppeteer.page",children:"pages"})," expose their current frame tree via the ",(0,s.jsx)(r.a,{href:"/api/puppeteer.page.mainframe",children:"Page.mainFrame()"})," and ",(0,s.jsx)(r.a,{href:"/api/puppeteer.frame.childframes",children:"Frame.childFrames()"})," methods."]}),"\n",(0,s.jsx)(r.h2,{id:"example-2",children:"Example 2"}),"\n",(0,s.jsx)(r.p,{children:"An example of dumping frame tree:"}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-ts",children:"import puppeteer from 'puppeteer';\n\n(async () => {\n  const browser = await puppeteer.launch();\n  const page = await browser.newPage();\n  await page.goto('https://www.google.com/chrome/browser/canary.html');\n  dumpFrameTree(page.mainFrame(), '');\n  await browser.close();\n\n  function dumpFrameTree(frame, indent) {\n    console.log(indent + frame.url());\n    for (const child of frame.childFrames()) {\n      dumpFrameTree(child, indent +