document.querySelectorAll 的结果不一致答案

【问题标题】：Inconsistent results from document.querySelectorAlldocument.querySelectorAll 的结果不一致
【发布时间】：2021-03-27 15:15:18
【问题描述】：

我打开了 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)：

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

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

结果：“

”

【问题讨论】：

你能给我们看一些 HTML 吗？
我认为我正在使用的 HTML 太复杂而无法共享。
好的。您确定在评估表达式时元素已加载吗？
@Rojo 当我评估表达式时，我正在查看屏幕上的相关元素。它们一定已经加载了。
哦，它在 iFrame 中。 How about try it like this the first time?

标签： javascript html google-chrome dom

【解决方案1】：

访问 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)

【讨论】：