动态网站iframe内DOM元素使用querySelector查询返回null问题求助

现象说明 #

该情况属于浏览器的正常机制，不是异常问题。

根因分析 #

• iframe是独立的浏览上下文，内部DOM和顶层页面DOM完全隔离。document.querySelector默认只会查询当前执行上下文所属文档的DOM树。
• 你选中高亮元素时查询成功，是因为Chrome开发者工具会自动将控制台的执行上下文切换为元素所属的iframe文档；当你选中顶层的iframe节点时，控制台上下文切回了顶层文档，自然无法查询到iframe内部的元素。

优化后的获取方案 #

选择器调整 #

因为li元素id是随机生成的，不需要将id加入选择器条件，直接通过目标类名查询即可，适配性更强。

执行逻辑调整 #

需要先获取iframe对应的内部文档对象，再在该文档内执行元素查询，示例JS逻辑如下：

// 第一步：获取目标iframe节点
const trollIframe = document.querySelector('.trollbox-iframe');
// 第二步：获取iframe内部的文档对象
const iframeDocument = trollIframe.contentDocument || trollIframe.contentWindow.document;
// 第三步：在iframe文档内查询所有目标元素
const messageNodes = iframeDocument.querySelectorAll('span.room-display-message-message');
// 遍历获取innerText即可
messageNodes.forEach(item => {
  console.log(item.innerText);
});

CEFSharp适配注意点 #

如果在CEFSharp中执行上述JS遇到跨域限制，可在CEF初始化时添加禁用web安全的启动参数，即可正常访问跨域iframe的内部DOM：

var cefSettings = new CefSettings();
cefSettings.CefCommandLineArgs.Add("disable-web-security", "1");
Cef.Initialize(cefSettings);

内容的提问来源于stack exchange，提问作者HB1963