Facebook 如何发布 json 并在 iframe 中加载响应？

Posted 2023-05-09

【中文标题】Facebook 如何发布 json 并在 iframe 中加载响应？

【英文标题】：How does Facebook post json and load the response in an iframe?

【发布时间】：2013-09-29 16:34:15

【问题描述】：

我在他们的画布页面explained here 上嵌入了与 Facebook 完全相同的应用程序/游戏用例。我想向外部托管站点发送一个包含 JSON 对象的 HTTP POST 请求，并将响应加载到 iframe 中，如 described here。

到目前为止，我已经尝试了以下方法：

使用form 发布，使用target 属性将结果加载到iframe 中。 form 的字段在这里不是 JSON（如果我尝试转换它们，我将不得不手动发送一个 POST 请求，问题在下一个要点中解释） 手动发布 JSON，例如使用 jQuery 的 $.ajax() 或 $.post()，但是我无法在我的 iframe 中加载响应。如果我尝试使用 jQuery 手动将其插入 DOM，显然相对链接将不起作用。 在iframe 上设置src 属性，但这仅允许GET 请求。

如您所见，我最多只能获得 3 个所需属性中的 2 个。有谁知道怎么做（或者 Facebook 是怎么做的）？

【参考方案1】：

如果有人遇到同样的问题，这就是我发现的：

根据this，Facebook 很可能会执行以下操作：他们提交了一个（隐藏的）form，其中包含一个名为“signed_request”的参数，以及编码为 Base64 字符串的完整 JSON 对象。在form 的target 属性的帮助下，响应会自动加载到iframe。 form 也可以动态创建，并借助例如 jQuery 插入到 DOM 中。

另一种解决方案的工作方式如下：首先向外部站点发送一个带有 JSON 数据的 AJAX 请求。然后，该站点构建响应，将其缓存并使用可以加载响应的 URL 进行回复。然后将iframe 的src 属性设置为这个URL，它使用HTTP GET 请求加载原始响应。

我使用了第二种方法，因为我必须提交几个带有动态变化数据的请求，并且不想每次都编辑 DOM。我还使用了来自this *** answer 的建议，在我的iframe 中加载响应时不要留下浏览器历史记录条目。