如何获取iframe innerHTML来表示页面上实际可见的内容？

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

我想在网站中嵌入Google表单。我需要自动填充和隐藏表单字段之一。

这是一些html：

<!DOCTYPE html>

<html>

<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被正确填充。如何在我的代码内部实现这一目标？

我非常担心自己可能会遇到某些安全功能，而无法在我的应用程序中使用Google表单。

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

芜湖不芜

浏览 282回答 1