puppeteer读取iframe元素

前言

本章会介绍puppeteer读取frame内的元素。

iframe介绍

在HTML中，iframe是一种标记语言元素，用于在一个网页中嵌入另一个网页。iframe的全称是Inline Frame，即内联框架。它可以显示一个独立的HTML文档，这个文档可以和包含它的文档有不同的域名和路径，可以通过设置iframe元素的src属性来指定要显示的网页地址。

通过使用iframe，可以将一个网页分成多个区域，每个区域可以加载不同的网页内容，从而实现网页的分栏和多窗口功能。iframe还可以用来在网页中嵌入广告、视频等内容，或者将整个网站作为一个iframe嵌入到另一个网站中，从而实现多个网站之间的无缝嵌入。

但是需要注意的是，由于iframe会在页面中嵌入其他网站的内容，可能存在安全风险，比如可能会被用于注入恶意代码，或者用于模拟某些网站的登录界面进行钓鱼攻击等。因此，使用iframe时需要注意安全性问题，并遵循相关的安全规范和建议。

演示

const puppeteer = require('puppeteer')

async function anjuke() {
    const broswer = await puppeteer.launch({
        headless: false, defaultViewport: {
            width: 1920,
            height: 1020
        }
    });
    const page = await broswer.newPage();
    await page.goto('https://login.anjuke.com/login/form');
    //切换iframe
    await page.frames().map(frame => {console.log(frame.url())});
    const targetFrameUrl = 'https://login.anjuke.com/login/iframeform';
    const frame = await page.frames().find(frame=> frame.url().includes(targetFrameUrl));
    const phoneInput = await frame.waitForSelector('#phoneIpt');
    await phoneInput.type('13411112222');
}

anjuke();