修改

Question

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

在此页面上，我将加载一个iframe，其中包含来自其他域/网站的表单。

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

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

Answer 1

你是对的，出于安全原因（相同的原始政策），浏览器会阻止你想要的内容。

你能做什么：

在iframe中重新加载表单并将其从js sdk传递给您，您甚至可以将数据发布到iframe中（就像facebook使用canvas应用程序一样）。
您应该能够更改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）在iframe中使用POST

<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>

Answer 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.
});

Answer 3

您的标签页必须调用GraphAPI。

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

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

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

查看此文章。

Invoking JavaScript code in an iframe from the parent page

Facebook是否有可能获取用户的数据并在iframe中填充表单？

3 个答案:

修改