Node.js Puppeteer：如何接收 iframe 的 XHR 响应（使用 JS Web Worker）

Question

我有一个页面，每 10 秒通过 iframe 内的 XHR 与服务器进行通信。我想监视响应（文本/纯 UTF-8）。

与 DevTools Network 列表相反，Puppeteer 似乎没有“检测” 来自 iframe 内部的 XHR 响应，具有正常的页面过程：

page.on('response', async (response) => {}

当 iframe 的 ID 已知时，有什么方法可以接收 iframe 的 XHR 响应吗？ （由 JS Web Worker 执行 XHR 请求）

Answer 1

我编写了这个示例，它展示了请求确实是从页面的内部框架中捕获的。您必须小心，失败的请求实际上不会触发 page.on('response') 处理程序，但会触发 page.on('requestfailed')。

另外，请确保在向页面添加任何请求相关处理程序之前调用 await page.setRequestInterception(true)！

这是一个工作示例：（由于跨源限制，它只会触发 requestFailed。）

var puppeteer = require('puppeteer')

function simulateRequest() {

    function doXmlHTTPRequest() {
        function reqListener() {
            console.log('xml done.')
            console.log(this.responseText);
        }

        var oReq = new XMLHttpRequest();
        oReq.addEventListener("load", reqListener);
        oReq.open("GET", "https://www.google.com");
        oReq.send();
    }


    setInterval(doXmlHTTPRequest, 2 * 1000)

}

// Easiest way to get an Iframe is by its name.
const findFrame = (frames, name) => {
    return frames.find(f => f.name() === name)
}

const main = async() => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage()

    // have a page with only an iframe.
    const pageContent = '<iframe id="myFrame" name="frameName">'
    await page.setContent(pageContent)

    // important call!
    await page.setRequestInterception(true)

    page.on('response', async(res) => {
        console.log('Page response received..', )
    })

    page.on('requestfailed', () => {
        console.log('requestfailed recieved')
    })

    page.on('request', async(res) => {
        console.log('page request received..', )

        // make sure to continue request.
        res.continue()
    })

    // find the iframe!
    const targetFrame = findFrame(page.frames(), 'frameName')

    // set some test content..
    await targetFrame.setContent('<h1>hello</h1>')


    // add a script to iframe which simulates requests!
    await targetFrame.addScriptTag({

        // execute the function immediatly..
        content: `(${simulateRequest.toString()})()`
    })

}

main()