时间戳

首页 > 解决方案 > document.querySelectorAll 的结果不一致

javascript - document.querySelectorAll 的结果不一致

问题描述

我打开了 Chrome 开发控制台窗格并评估了这个表达式：

Array.from(document.querySelectorAll("div.fc-event-inner")).filter(e => {
  let r = e.getBoundingClientRect();
  return (r.left < 1354) && (r.top < 531) && (r.right > 1167) && (r.bottom > 487);})

它返回一个空数组。

然后我使用开发窗格中的“在页面中选择一个元素以检查它”按钮单击一个元素并在元素列表中查看我的元素展开。然后我重新评估了相同的表达式，它返回了一个包含 2 个元素的数组，即使页面上没有任何内容移动。为什么我得到不一致的结果？

顺便说一句，我可能应该简化这个问题。我认为当我简单地评估时也是如此

document.querySelectorAll("div.fc-event-inner")

记录问题

编辑：我试图在运行我的目标 querySelectorAll 之前评估每个 IFrame 的内容。当我评估这个表达式时，一切正常，但我仍然没有得到任何更新的结果：

document.querySelectorAll("iframe")[0].contentWindow.document.childElementCount

但是当我尝试评估这种情况时：

document.querySelectorAll("iframe")[1].contentWindow

Chrome 有一个相当严重的错误（STATUS_BREAKPOINT）： Chrome 页面错误 Chrome 开发工具错误

我可以使用 eval 来规避这个错误，但我发现 iframe 的内容是空白的：

eval("document.querySelectorAll(\"iframe\")[1].contentWindow.document.body.outerHTML")

结果：“<body></body>”

标签： javascripthtmlgoogle-chromedom

解决方案

访问 IFrame 中的内容带来了独特的挑战。要从 JavaScript 访问内容，首先需要访问正确的 IFrame。例如：

eval("document.querySelector(\"iframe\").contentDocument.querySelector(\"iframe\").contentWindow.document.querySelectorAll(\".fc-event-inner\")")

有eval必要避免在您键入时一旦开发工具窗格尝试评估和突出显示内框，就会发生 Chrome 错误。eval防止实时评估和突出显示。

如果使用 Selenium，这似乎对我有用：

var f = switchTo.frame(0)
var banners = f.findElements(By.cssSelector("div.fc-event-inner"))
Utilities.actionLog("Banners: " + banners.size)

推荐阅读