将 JSON 对象发布到 iFrame答案

【问题标题】：Posting a JSON object to an iFrame将 JSON 对象发布到 iFrame
【发布时间】：2012-08-22 20:36:30
【问题描述】：

我已经看到了将数据发布到 iframe 的不同方法，但我找不到可以只发送 JSON 对象的方法。所有的方法似乎都需要我使用表单元素来放入我的数据。

【问题讨论】：

【解决方案1】：

查看postMessage 并为您的消息使用 JSON.stringify 并在事件处理程序中使用 JSON.parse。

要实际发布到 iframe，您必须这样做

myIframe.contentWindow.postMessage(...)

fiddle

html

<button onclick="_sendMessage ()">Send</button>
<iframe src="" id="myIframe">

javascript

var myIframe = document.getElementById('myIframe');
myIframe.contentWindow.addEventListener('message', function(event) {
    console.log(JSON.parse(event.data));
}, false);


window._sendMessage = function() {
    var json = {payload:'Hello World'};
    myIframe.contentWindow.postMessage(JSON.stringify(json), '*');
}

【讨论】：

如果这样做，当我更改iframe的src时，数据是否会发布到src中指定的服务器？
我的用例是我在远程网站上有一个页面，需要将数据发布到该页面。结果页面就是我希望在 iframe 中显示的内容。
是的，您可以放置任何 src，但最好的办法是在使用正常 window.addEventListener 加载远程页面时添加事件侦听器......其余的就像示例中一样
老实说，我只玩过它的帖子消息经验很少
我一直在玩这个，这不会导致向服务器发送帖子，它只是从一个窗口向另一个窗口发送消息。我需要 iframe 将数据发布到服务器。

【解决方案2】：

您可以使用Porthole JS 库。它将自己描述为一个“用于安全跨域 iFrame 通信的 JavaScript 库”。

如果可用，它会使用postMessage()，但对于不支持的浏览器，它会恢复为“隐藏代理”解决方法。

【讨论】：