Facebook是否可以获取用户的数据并在iframe中填充表单
Facebook Is it possible to grab a user's data and populate a form in an iframe?
我正在尝试为Facebook页面创建一个iframe选项卡。
在此页面上,我正在加载一个由来自另一个域/站点的表单组成的 iframe。
是否可以使用 javascript查询图形 api,以使用 javascript 将用户的数据加载到此 iframe 加载表单中,以便向用户显示预填充?
我知道存在跨域安全问题。在这种情况下,假设我的 iframe 选项卡现在托管在与 iframe 加载表单相同的域上,现在是否可以这样做?
你是对的,由于安全原因(同源策略),你想要的东西会被浏览器阻止。
您可以执行的操作:
-
在iframe中重新加载表单,并将从js sdk获得的数据传递给它,您甚至可以将数据发布到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>
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.
});
您的选项卡页面必须调用 GraphAPI。
将用户的数据返回到 JavaScript 线程后,您有 2 个选项:
1) 您始终可以使用查询字符串将数据传递到 IFRAME。只有在这一刻,您才使用包含查询字符串中数据的正确 url 生成 iframe。
2)你可以调用一个存在于内部IFRAME页面中的javascript函数。此函数将从 Facebook 图形 api 响应接收对象,并直接填充页面。
查看这篇文章。
从父页面调用 iframe 中的 JavaScript 代码
- 使用javascript将表单提交到iframe目标中
- 从一个iframe到另一个ifame的过帐表单-IE
- 在jQuery中的IFrame中提交表单后刷新父窗口
- 将HTML表单发布到iframe会导致浏览器历史记录出现问题
- 按下iframe内部的Youtube订阅表单按钮
- 在 iframe 中指定全局变量名称时,表单目标会中断
- 动态更改表单操作以生成iframe
- iFrame表单提交并在结果后发出警报
- 提交表单/使用JavaScript获取HTML而不使用iframe
- 从iframe调用Parent函数,然后更新iframe表单值
- 使 iframe/表单固定位置
- 当用户通过 iframe 表单登录时,如何将登录按钮更改为注销
- 嵌入 iFrame 表单 -- 如何获取父 URL
- 在提交IFRAME表单之前,请将父url保存到隐藏字段
- 如何将数据从一个表单发布到另一个iFrame表单
- 使用JavaScript在父窗口成功打开iFrame表单
- 如何在iframe表单提交后使用submit() jquery调用函数
- 如何阻止恶意自动iFrame表单输入从其他网站
- 提交值到另一个页面iframe表单
- Iframe表单提交数据到窗口URL