使用 Devtools 协议事件 Page.frameNavigated 获取客户端导航重定向

Question

Devtools 协议中的 framenavigated 事件似乎与 Puppeteer 中的 framenavigated 事件的工作方式不同。如果我在下面的 Puppeteer 示例中使用 parentframe 方法，我只会得到我想要的客户端导航重定向。如果我使用 Devtools 协议示例将 parentframe 方法替换为 parentId 我什么也得不到，因为代码没有通过 parentId.

如何使用 Devtools 协议中的 framenavigated 事件来实现与 Puppeteer framenavigated 相同的行为方式并且只获取导航重定向链？

// var url = "http://wechat.com";
var url = "http://yahoo.com";

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
const page = await browser.newPage();

// Puppeteer framenavigated example:
page.on('framenavigated', frame => {
 if(frame.parentFrame() === null) {
console.log("Puppeteer nav frame: ");
console.log(frame._url);
}
});
// Result returns:
// Puppeteer nav frame:
// https://uk.yahoo.com/?p=us

// Devtools protocol framenavigated example:
const client = await page.target().createCDPSession();
await client.send('Page.enable');

await client.on('Page.frameNavigated', (e) => {
// console.log("Framenavigated event fired");
if(e.frame.parentId === null) {
    console.log("Devtools protocol frame: ");
    console.log(e.frame.url);
 }
});
// Result returns: 
// Either hangs up and times out or finishes but returns nothing

await page.goto(url);
await browser.close();

});

Answer 1

刚刚又看了一遍，发现了问题，所以我会回答我自己的问题。

Puppeteer 中的 parentFrame() 方法 returns null 用于作为页面主框架一部分的框架，但 Devtools 协议中的 parentId returns undefined 为一个主框架。所以，我只需要检查 undefined 或 false parentId 值。很明显我知道@@.

await client.on('Page.frameNavigated', (e) => {
    if(!e.frame.parentId) {
    // if(typeof e.frame.parentId === "undefined") { // works also
    console.log(e.frame.url);
    }
});

使用 Devtools 协议事件 Page.frameNavigated 获取客户端导航重定向

Using Devtools protocol event Page.frameNavigated to get client side navigation redirects

javascript

google-chrome-devtools

google-chrome-headless

puppeteer