【问题标题】：Facebook Is it possible to grab a user's data and populate a form in an iframe?Facebook 是否可以获取用户数据并在 iframe 中填充表单？
【发布时间】：2012-05-23 03:22:54
【问题描述】：

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

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

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

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

【问题讨论】：

只是为了检查我是否正确：您有一个从域 dX 托管的页面应用程序，在该页面 (pA) 中，您想要加载另一个页面 (pB，带有表单)，它是也从 iframe 中的域 dX 提供服务，到目前为止是这样吗？如果是这样，您想从哪里进行 api 调用？ pA，pB，或两者兼而有之？另外，在应用设置中，应用域设置为 dX?
否定。 pB，带有一个表单，由 iframe 中的域 dZ 提供。我想通过 pA 中的 FB Javascript SDK 进行 API 调用，以更新 pB 中的表单（用户详细信息）。就个人而言，我认为这不可能，因为如果可以的话，这听起来像是一个巨大的安全问题。但我只是想在 SO 上仔细检查一下。
您还应该仔细检查您尝试做的事情是否违反平台政策，至少由于将数据传输到其他域/站点，和/或因为表单数据建立在检索到的详细信息之上来自 Facebook 的 API。

标签： javascript jquery facebook iframe facebook-iframe

【解决方案1】：

你是对的，出于安全原因（同源策略），你想要的会被浏览器阻止。

你可以做什么：

在 iframe 中重新加载表单并将您从 js sdk 获取的数据传递给它，您甚至可以将数据 POST 到 iframe 中（就像 facebook 对画布应用程序所做的那样）。
您应该能够更改 iframe 的位置，但只能更改哈希部分（片段），这不会导致 iframe 重新加载。
在 iframe 中注意位置变化并从片段中提取数据。
问题是这种方法可能会弄乱浏览器历史记录。
寻找另一种跨域通信的解决方案，也许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>

【讨论】：

您能否详细说明第 1 点？从您刚才所说的我了解到，dX 的 pA 能够更改 dZ 的 pB 中输入字段的值？您认为您可以为我指明正确的方向吗？
还有，我不会像你说的那样被浏览器屏蔽吗？
不，浏览器不应阻止此尝试。例如，这是 facebook 加载画布应用程序的方式。

【解决方案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.
});

【讨论】：

【解决方案3】：

您的标签页必须调用 GraphAPI。

一旦您将用户数据返回到您的 JavaScript 线程，那么您有 2 个选择：

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

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

查看这篇文章。

Invoking JavaScript code in an iframe from the parent page

【讨论】：