7

我正在尝试为 Facebook 页面创建 iframe 选项卡。

在此页面上，我正在加载一个 iframe，该 iframe 由来自另一个域/站点的表单组成。

是否可以使用 javascript 来查询图形 api 以使用 javascript 将用户的数据加载到这个 iframe 加载的表单中，这样看起来是预先填充给用户的？

我知道存在跨域安全问题。在这种情况下，假设我的 iframe 选项卡现在托管在与 iframe 加载的表单相同的域上，这现在可行吗？

4

3 回答 3

6

没错，出于安全原因（同源策略），浏览器会阻止您想要的内容。

你可以做什么：

  1. 在 iframe 中重新加载表单并将您从 js sdk 获得的数据传递给它，您甚至可以将数据发布到 iframe（就像 facebook 对画布应用程序所做的那样）。

  2. 您应该能够更改 iframe 的位置，但只是哈希部分（片段），这不会导致 iframe 重新加载。
    在 iframe 中注意位置变化并从片段中提取数据。
    问题是这种方法可能会弄乱浏览器历史记录。

  3. 寻找另一种跨域通信的解决方案，也许是 easyXDM？

编辑

这是第一个选项的两个实现：

1) 使用 GET

<iframe id="userform"></iframe>

<script type="text/javascript">
    // load and init FB JS SDK

    FB.api("me", function(response) {
        document.getElementById("userform").src = USER_FORM_URL + "?name=" + response.name;
    });
</script>

2) 使用 POST 进入 iframe

<form method="POST" action="USER_FORM_URL" target="userform" id="postForm">
    <input type="hidden" name="fbResponse" id="fbResponseInput" />
</form>

<iframe name="userform"></iframe>

然后，在 iframe 本身上，获取数据（从 GET 或 POST）并相应地呈现用户表单。

<script type="text/javascript">
    // load and init FB JS SDK

    FB.api("me", function(response) {
        document.getElementById("fbResponseInput").value = JSON.stringify(response);
        document.getElementById("postForm").submit();
    });
</script>
于 2012-05-29T07:38:04.340 回答
2 
var ifrm = document.getElementById('myIframe');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;

现在你有了 iframe，只需使用

ifrm.getElementById('textBoxId').value = 'value-fetched-from-facebook';

通过以下方式从 FB 获取数据

FB.api('me?fields=firstName&lastName', function(res)
{
//response contains your user info.
});
于 2012-05-23T03:32:19.943 回答
1

您的标签页必须调用 GraphAPI。

将用户数据返回到 JavaScript 线程后，您有 2 个选项：

1）您始终可以使用查询字符串将数据传递给您的 IFRAME。只有在这一刻，您才生成具有正确 url 的 iframe，其中包含查询字符串中的数据。

2) 您可以调用位于您的内部 IFRAME 页面中的 javascript 函数。此函数将从 Facebook 图形 api 响应接收对象，并将直接填充页面。

检查这篇文章。

从父页面调用 iframe 中的 JavaScript 代码

于 2012-05-30T22:37:47.613 回答