使用 chrome devtools 协议获取 iframe 中元素的节点 ID

Question

Chrome Devtools 协议 DOM.querySelectorAll returns html 中元素的所有节点。但它不 return iframe 内容的 id。有办法得到它们吗？

const doc = await page._client.send('DOM.getDocument');
const result = await page._client.send('DOM.querySelectorAll', {nodeId: doc.root.nodeId, selector: '*'});

<!-- Host Page -->
<!DOCTYPE html>
<html lang="en">
<body>
    <div>Hello World</div>
    <iframe src="demo.html" frameborder="0"></iframe>
</body>
</html>


<!-- IFrame Page -->
<!DOCTYPE html>
<html lang="en">
<body>
    <!-- I need to access this div from dev tools -->
    <div>Demo Page</div> 
</body>
</html>

Answer 1

在这个gist

中找到了答案

async function findElementInIframe(DOM, iframeSelector, elementSelector) {
    const doc = await DOM.getDocument({depth: 0});

    const iframeQueryResult = await DOM.querySelector({nodeId: doc.root.nodeId, selector: iframeSelector});
    const iframeDescription = await DOM.describeNode({nodeId: iframeQueryResult.nodeId});

    const contentDocRemoteObject = await DOM.resolveNode({backendNodeId: iframeDescription.node.contentDocument.backendNodeId});
    const contentDocNode = await DOM.requestNode({objectId: contentDocRemoteObject.object.objectId});

    const elementQueryResult = await DOM.querySelector({nodeId: contentDocNode.nodeId, selector: elementSelector});
    return await DOM.describeNode({nodeId: elementQueryResult.nodeId});
}

使用 chrome devtools 协议获取 iframe 中元素的节点 ID

Get nodeIds of elements within iframe using chrome dev tools protocol

puppeteer

chrome-devtools-protocol