【问题标题】：how to get iframe innerHTML to represent what is actually visible on the page?如何让 iframe innerHTML 表示页面上实际可见的内容？
【发布时间】：2019-09-15 14:54:11
【问题描述】：

所以这是发生在我身上的一件疯狂的事情。

我想在网站中嵌入 Google 表单。我需要自动填充和隐藏其中一个表单域。

这是一些html：

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <iframe
      src="https://docs.google.com/forms/d/e/1FAIpQLSdisob821_bYS5Ya_r460Bn0RHYSB5xqIW6Yz-z4WPwEVjxMQ/viewform?embedded=true"
      width="640"
      height="734"
      frameborder="0"
      marginheight="0"
      marginwidth="0"
      >Loading...</iframe
    >
  </body>
</html>

漂亮而简单。现在，如果我在我的浏览器（当前是 Chrome）中运行它，表单就会显示得很好。我亲眼看到它。我一点也不醉。

现在在我的开发者工具控制台中，我这样做了：

formFrame = document.querySelector("body > iframe");
formFrame.innerHTML;  // the value is "Loading..."

所以 js 认为我们还在显示占位符文本？奇怪的。我真的不关心直接使用innerHTML。我想要的更像是这样的：

inputContainers = document.querySelectorAll("div.freebirdFormviewerViewNumberedItemContainer");

长度应该是2。是0

如果我在我的开发工具中查看 html 元素树，一切似乎都应有尽有。

我使用我的开发工具的“检查元素”功能只是为了确保我使用的选择器是正确的。

然后我再次执行formFrame.innerHTML。我收到错误Uncaught ReferenceError: formFrame is not defined。天哪

然后我再次执行：

inputContainers = document.querySelectorAll("div.freebirdFormviewerViewNumberedItemContainer")

它返回两个元素。

切入正题

我假设我对开发人员工具的“检查元素”功能的处理引发了一个导致 dom 正确填充的事件。如何从我的代码中实现这一点？

我非常担心我可能会遇到一些安全功能，我将无法在我的应用程序中使用谷歌表单。

任何帮助或见解将不胜感激！

【问题讨论】：

您需要上述 iframe 的内容，但它是 Google，因此您可能需要使用 Google 的特定于该服务的 API。看到这个post
@zer00ne 感谢您的意见，但我真的不相信是这样。也许我没有把我的问题说得足够清楚。基本上这就是发生的事情。 (1.) 我打开页面。看起来不错。第 (2) 天我可以清楚地看到谷歌表单我按 F12 并尝试使用 js 探索 iFrame 的内部并失败。就 JS 而言，页面的内容是“正在加载...”。换句话说，JS 认为我正在查看的是占位符内容。但是我可以看到表单（3）我点击“检查元素工具”然后点击已经可见且完全可用的表单元素之一
@zer00ne (3 ...) 检查元素行为正常，我正在查看<input ... (4)。我再次尝试第 2 步，这次 js 认为没有占位符。它返回我实际看到的内容。所以在第 (4) 步中，`formFrame.innerHTML` 代表了现实。而在步骤（2）中它根本没有
iframe 可以从控制台访问，但这就是它的范围。有一些安全措施（例如，同源策略）可以防止对 iframe 内容（内容是指位于src 的实际真实页面）进行任何实际操作。 .innerHTML 属性将返回目标元素的内容 在开始标记和结束标记之间 作为文字字符串（又名 htmlString）。换句话说，不要依赖控制台显示的有关 iframe 的内容，它不能以编程方式访问。
@zer00ne 感谢您花时间解释。如果您将其发布为答案，我会接受

标签： javascript select iframe

【解决方案1】：

事实证明这是不可能的。这是一项安全功能

【讨论】：