通过postMessage发送跨来源iFrame内容失败

Question

首先，我知道跨域访问iFrame元素是一个棘手的话题，我可能不会这么做。

我的应用程序中嵌入了一个谷歌表单，我需要设置它，以便在用户提交回复时告诉我。我已经尝试了很多方法，但最乐观的方法是在加载最后一个页面时读取iFrame的HTML，说明响应已提交。

因此，我正在寻找如何简单阅读iFrame内容的任何片段的解决方案，我在另一个帖子中看到了这条评论：https://stackoverflow.com/a/32265508/3856569

我正在尝试阅读评论中建议的iFrame的内容，并通过postMessage将其发送到父窗口，如下所示：

$(document).ready(function() {
document.getElementById("googleForm").addEventListener("load", 
function() {
var message = document.getElementById("googleForm");
parent.postMessage(JSON.parse(JSON.stringify(message)), '*')
});
})

并且父窗口读取这样的消息：

function receiveMessageGoogleForm (event) {
console.log(event)
}
//Listen for message events
window.addEventListener("message", receiveMessageGoogleForm, false);

但是，事件对象在接收到消息时的数据属性似乎为空。

这是另一种避免阅读任何类型的跨原点iFrame的内置机制吗？还是我在这里遗漏了什么？

Answer 1

暂时忘记postMessage。

var message = document.getElementById("googleForm");
var result = JSON.parse(JSON.stringify(message));
console.log(result);

<div id="googleForm">content</div>

如果将DOM元素传递到JSON.stringify中，则会得到一个空对象(一个对象的JSON表示(。

DOM元素没有任何将由JSON.stringify自动处理的属性。

---

如果您想从表单中获取数据，那么您需要实际从表单中读取数据(例如，获取输入元素并读取其value属性(。

---

如果您想从谷歌表单的DOM中提取数据或如果您想发送来自谷歌表单的postMessage，则需要在包含表单的HTML文档中编写执行该操作的JavaScript。

你不能跨域拉它。

带有谷歌表单的页面可以访问数据，并可以通过发布消息跨域推送数据。

你所能做的一切都不会让你只帮助自己获取这些数据。

它是浏览器所有者和网站所有者之间的私有信息，如果要与其他人共享(例如，将该网站封装在iframe中的人(，其中一人需要采取明确的行动。