Frame クラス
DOM フレームを表します。
フレームを理解するには、フレームを <iframe> 要素と考えてください。iframe と同様に、フレームはネストできます。フレーム内で JavaScript が実行されると、その JavaScript は、JavaScript が実行されている周囲のフレーム内のフレームには影響しません。
シグネチャ:
export declare abstract class Frame extends EventEmitter<FrameEvents>
**拡張:** EventEmitter<FrameEvents>
備考
フレームのライフサイクルは、親の page でディスパッチされる 3 つのイベントによって制御されます。
このクラスのコンストラクタは内部用としてマークされています。サードパーティのコードは、コンストラクタを直接呼び出したり、`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 | 読み取り専用 | boolean |
メソッド
| メソッド | 修飾子 | 説明 |
|---|---|---|
| $(selector) | 指定されたセレクタに一致する要素をフレーム内でクエリします。 | |
| $$(selector) | 指定されたセレクタに一致するすべての要素をフレーム内でクエリします。 | |
| $$eval(selector, pageFunction, args) | フレーム内で指定されたセレクタに一致する要素の配列に対して、指定された関数を実行します。 指定された関数が Promise を返す場合、このメソッドは Promise が解決されるまで待機します。 | |
| $eval(selector, pageFunction, args) | フレーム内で指定されたセレクタに一致する最初の要素に対して、指定された関数を実行します。 指定された関数が Promise を返す場合、このメソッドは Promise が解決されるまで待機します。 | |
| addScriptTag(options) | 指定された URL またはコンテンツを持つ <script> タグをページに追加します。 | |
| addStyleTag(options) | 指定された URL を持つ HTMLStyleElement をフレームに追加します。 | |
| addStyleTag(options) | 指定された URL を持つ HTMLLinkElement をフレームに追加します。 | |
| childFrames() | 子フレームの配列。 | |
| click(selector, options) | `selector` に一致する最初の要素をクリックします。 | |
| content() | DOCTYPE を含む、フレームの完全な HTML コンテンツ。 | |
| 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) | 指定されたセレクタに一致する要素がフレームに表示されるまで待機します。 このメソッドは、ナビゲーションをまたいで機能します。 |