Frame 类
表示 DOM 框架。
要理解框架，您可以将框架视为 <iframe> 元素。就像 iframe 一样，框架可以嵌套，当在框架中执行 JavaScript 时，JavaScript 不会影响 JavaScript 执行的周围框架内的框架。
签名：
export declare abstract class Frame extends EventEmitter<FrameEvents>
扩展： EventEmitter<FrameEvents>
备注
帧生命周期由三个事件控制，这些事件都在父 页面 上分派
此类的构造函数标记为内部。第三方代码不应直接调用构造函数，也不应创建扩展 Frame 类的子类。
示例 1
在任何时间点，页面 通过 Page.mainFrame() 和 Frame.childFrames() 方法公开其当前帧树。
示例 2
一个转储帧树的示例
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 + ' ');
}
}
})();
示例 3
从 iframe 元素获取文本的示例
const frame = page.frames().find(frame => frame.name() === 'myframe');
const text = await frame.$eval('.selector', element => element.textContent);
console.log(text);
属性
| 属性 | 修饰符 | 类型 | 描述 |
|---|---|---|---|
| detached | 只读 | 布尔值 |
方法
| 方法 | 修饰符 | 描述 |
|---|---|---|
| $(selector) | 查询帧以查找与给定选择器匹配的元素。 | |
| $$(selector) | 查询帧以查找与给定选择器匹配的所有元素。 | |
| $$eval(selector, pageFunction, args) | 在帧中对与给定选择器匹配的元素数组运行给定函数。 如果给定函数返回一个 promise，则此方法将等待 promise 解析。 | |
| $eval(selector, pageFunction, args) | 在框架中运行与给定选择器匹配的第一个元素上的给定函数。 如果给定函数返回一个 promise，则此方法将等待 promise 解析。 | |
| addScriptTag(options) | 在页面中添加一个<script>标签，包含所需的 URL 或内容。 | |
| addStyleTag(options) | 在框架中添加一个HTMLStyleElement，包含所需的 URL。 | |
| addStyleTag(options) | 在框架中添加一个HTMLLinkElement，包含所需的 URL。 | |
| childFrames() | 子框架的数组。 | |
| click(selector, options) | 点击找到的第一个与selector匹配的元素。 | |
| content() | 框架的完整 HTML 内容，包括 DOCTYPE。 | |
| evaluate(pageFunction, args) | 行为与Page.evaluate()相同，只是它在该框架的上下文中运行。 | |
| evaluateHandle(pageFunction, args) | 行为与Page.evaluateHandle()相同，只是它在该框架的上下文中运行。 | |
| focus(selector) | 聚焦与selector匹配的第一个元素。 | |
| frameElement() | ||
| goto(url, options) | 将框架导航到给定的url。 | |
| hover(selector) | 将指针悬停在与selector匹配的第一个元素的中心。 | |
| isDetached() | 如果框架已分离，则为true。否则为false。 | |
| isOOPFrame() | 如果框架是进程外 (OOP) 框架，则为true。否则为false。 | |
| locator(selector) | 为提供的选择器创建一个定位器。有关详细信息和支持的操作，请参阅Locator。 | |
| locator(func) | 为提供的函数创建一个定位器。有关详细信息和支持的操作，请参阅Locator。 | |
| name() | 框架的name属性，如标签中指定。 | |
| page() | 与框架关联的页面。 | |
| parentFrame() | 父框架（如果有）。分离的框架和主框架返回null。 | |
| select(selector, values) | 在与selector匹配的第一个<select>元素上选择一组值。 | |
| setContent(html, options) | 设置框架的内容。 | |
| tap(selector) | 点击与selector匹配的第一个元素。 | |
| title() | 框架的标题。 | |
| type(selector, text, options) | 为文本中的每个字符发送keydown、keypress/input和keyup事件。 | |
| url() | 框架的 URL。 | |
| waitForFunction(pageFunction, options, args) | ||
| waitForNavigation(options) | 等待框架导航。当您运行间接导致框架导航的代码时，此方法很有用。 使用History API更改 URL 被视为导航。 | |
| waitForSelector(selector, options) | 等待与给定选择器匹配的元素出现在框架中。 此方法跨导航有效。 |