querySelector 在检查元素之前不会检测元素

Question

我的问题似乎与此问题非常相似：Document.querySelector 返回 null，直到使用 DevTools 检查元素，但是存在一些非常令人困惑的显着差异，并且表明问题可能有所不同。

我正在尝试编写代码来替换 Google Chat 上输入框中的文本，因此我使用 document.querySelector。我需要的输入字段实际上是一个divwith contenteditable=true，所以我有以下代码：

document.querySelector('div[contenteditable]');

此代码最初在浏览器控制台中返回 null，直到在检查器中单击该元素（单击检查器中的元素并使用检查器光标产生相同的结果）。该元素显然存在，因为我可以在其中键入文本，并且检查器显示它存在于我正在查询的所有属性中（甚至在检查器中单击它之前），尽管查询返回 null。使用检查器单击元素将立即修复此问题。

另外（我不确定这是否相关，但似乎它可能暗示了问题的本质），即使单击检查器中的元素以使查询返回一个元素，该查询的结果不能存储在变量中。

Answer 1

我遇到了类似的问题，对我有帮助的是从 iFrame 中获取元素

根据您的用例，您可能想要切换控制台输入的“上下文”...至少对于代码测试目的，这可能有用并且不会产生“空”结果。（底部包含图像示例）

但是，请注意，无法使用不同的域访问 iframe。使用时document.querySelector(".aAtlvd.bl").contentWindow.document我收到此消息：

未捕获的 DOMException：阻止源为“https://mail.google.com”的框架访问跨源框架。

为此，您将需要SecurityError: Blocked aframe with origin from accessing a cross-originframe 的解决方案 ，这基本上是禁用浏览器安全策略的一部分。

例子：