FB.api首次AJAX调用页面只加载首次、加载、页面、FB
2023-09-10 21:04:36
作者：叶落若相随
我有一个FB.api只装载第一时间页面时通过AJAX检索的问题。 FB.getLoginStatus没有工作，虽然。
演示页： http://proof.ptly.com/test/fb /test-ajax.htm （点击加载链接的作品第一次，但失败，点击第二次）
预期/期望的行为：为应用程序提供许可后，应当关联到用户的所有组或页面列表
当前行为：组列表中只填入第一次加载。随后的点击不加载列表（FB.api不返回响应 - 日志查看控制台）
这背后的问题的原因是，该页面我检索（TEST.HTM）不能改变，但页面我是从（测试ajax.htm）可以在调用它。虽然我知道这个方法是不是pretty的也不理想，我想知道是否可以克服。因此，建议改变底层TEST.HTM，而正确的，也不会解决我遇到的问题。
样品code
首页调用AJAX页面
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆gt;我的Facebook登录页面＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的LANGUAGE =JavaScript的SRC =JS / jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
VAR装= FALSE;
jQuery的（文件）。就绪（函数（）{
jQuery的（＃LNK）。点击（函数（五）{
即preventDefault（）;
jQuery的（＃divContent）。负载（TEST.HTM，函数（）{
如果（装入）
{
FB.getLoginStatus（FBverifyLogin）;
}
其他
{
加载=真正的;
}
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆所述; A HREF =＃标识='LNK'＆GT;负载＆所述; / a取代;
＆LT; DIV ID ='divContent'＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
检索AJAX页面
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR FB_config = {
API_ID：347798778614308，
权限：publish_stream，manage_pages，user_groups
};
（功能（D）{
VAR JS，ID ='Facebook的jssdk;如果（d.getElementById（ID））{返回;}
JS = d.createElement（'脚本'）; js.id = ID; js.async = TRUE;
js.src =//connect.facebook.net/en_US/all.js;
d.getElementsByTagName（'头'）[0] .appendChild（JS）;
}（文件））;
jQuery的（文件）。就绪（函数（）{
//初始化FB
window.fbAsyncInit =功能（）{
FB.init（{
APPID：'347798778614308，
状态：真正的，
饼干：真正的，
XFBML：真正的，
OAuth的：真正的
}）;
FB.Event.subscribe（'auth.statusChange'，FBverifyLogin）;
};
}）;
功能FBverifyLogin（响应）{
的console.log（FBverifyLogin）;
的console.log（响应）;
。jQuery的（＃FBreauth）隐藏（）;
如果（response.status ==='连接'）{
//用户登录并验证您
//应用程序，并response.authResponse用品
//用户的ID，一个有效的访问令牌，已签名
//请求，以及时的访问令牌
//和签名的请求每个到期
VAR的uid = response.authResponse.userID;
VAR accessToken = response.authResponse.accessToken;
ShowPostToFacebookCheckbox（）;
FBdisplayMyPages（response.authResponse）;
。jQuery的（＃btnLogin）隐藏（）;
checkPermissions（）;
}否则，如果（response.status ===not_authorized'）{
} 其他 {
//没有登录到Facebook的用户。
jQuery的（＃btnLogin）显示（）。
返回false;
}
}
功能checkPermissions（）{
的console.log（checkPermissions）;
FB.api（'/ ME /权限，函数（响应）{
（在checkPermissions fb.api）的console.log;
的console.log（响应）;
变种权限= FB_config.PERMISSIONS.split（，）;
对于（VAR I = 0; I＆LT; permissions.length;我++）
{
如果（response.data [0] [权限[I]] ==未定义|| response.data [0] [权限[I]]！= 1）
{
jQuery的（＃FBreauth）显示（）。
打破;
}
}
}）;
}
功能FBdisplayMyPages（authResponse）{
的console.log（FBdisplayMyPages）;
执行console.log（authResponse）;
FB.api（'/ ME /账户'，函数（响应）{
（在FBdisplayMyPages fb.api）的console.log;
的console.log（响应）;
VAR海峡=;
VAR名称=;
变种数= 0;
STR + ='＆LT; OPTGROUP标签=页面＆GT;';
对于（VAR I = 0; I＆LT; response.data.length;我++）
{
如果（response.data [I] .category！=应用程序）
{
名称= response.data [我]。名称;
STR + ='＆LT;期权价值=+ response.data [I] .ID +_+ response.data [I] .access_token +'＆GT;+名字+'＆LT; /选项＆GT;';
算上++;
}
}
STR + =＆LT; / OPTGROUP＆gt;中;
jQuery的（＃msgPostOn）HTML（STR）。
FB.api（'/ ME /组'，函数（响应）{
的console.log（在FBdisplayMyPages fb.api 2）;
的console.log（响应）;
海峡= jQuery的（＃msgPostOn）的HTML（）。
STR + ='＆LT; OPTGROUP标签=组＆GT;';
NAME =;
对于（VAR I = 0; I＆LT; response.data.length;我++）
{
如果（response.data [I] .category！=应用程序）
{
名称= response.data [我]。名称;
STR + ='＆LT;期权价值=+ response.data [I] .ID +_+ authResponse.accessToken +'＆GT;+名字+'＆LT; /选项＆GT;';
算上++;
}
}
STR + =＆LT; / OPTGROUP＆gt;中;
jQuery的（＃msgPostOn）HTML（STR）。
开关（计数）
{
情况下0：
//通知，有没有页面。将张贴到个人网页
STR + ='＆LT;期权价值=+ authResponse.userID +_+ authResponse.accessToken +'＆GT;个人账户＆LT; /选项＆GT;';
jQuery的（＃msgPostOn）HTML（STR）。
jQuery的（＃FBpostTo）文本。（找不到网页发布到您的个人帐户。）;
jQuery的（＃FBpostTo）显示（）。
打破;
情况1：
//只有1页。把它藏起来...
//通知页面的名称更新
。jQuery的（＃msgPostOn）隐藏（）;
。jQuery的（＃FBpostTo）HTML（张贴到＆lt;强＆GT;+姓名+＆LT; / STRONG＆gt;中）;
jQuery的（＃FBpostTo）显示（）。
打破;
默认：
//通知用户选择一个页面张贴到
jQuery的（＃FBpostTo）文本（有多个组/与你的帐户相关联的网页指定其张贴到。）。
jQuery的（＃FBpostTo）显示（）。
jQuery的（＃msgPostOn）显示（）。
}
}）;
}）;
}
传播FBrefresh（）{
的console.log（FBrefresh）;
FB.getLoginStatus（FBverifyLogin）;
}
传播FBreauth（）{
的console.log（FBreauth）;
FB.ui（
{
方法：OAuth的，
显示：弹出，
APP_ID：FB_config.API_ID，
CLIENT_ID：FB_config.API_ID，
redirect_uri：http://www.facebook.com/connect/login_success.html
适用范围：FB_config.PERMISSIONS
}
）;
}
功能ShowPostToFacebookCheckbox（）
{
的console.log（ShowPostToFacebookCheckbox）;
jQuery的（'＃postToFacebook2），CSS（显示，内联）。
。jQuery的（'＃LabelForFacebook），CSS（显示，内联）;
}
＆LT; / SCRIPT＆GT;
＆LT; DIV ID =FB-根＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =postToFacebookField级=FieldContainer中勾选＆GT;
＆LT; DIV ID =btnLogin级=FB-登录按钮范围=publish_stream，manage_pages，user_groups＆GT;使用Facebook登入＆LT; / DIV＆GT;
＆LT;输入类型=复选框的风格=显示：无NAME =postToFacebook2值=的ID =postToFacebook2＆GT;
＆LT;标签样式=光标：指针;显示：无=postToFacebook2ID =LabelForFacebook＆GT;发布到Facebook页面＆LT; /标签＆gt;
＆LT; DIV ID =FBpostTo的风格=显示：无＆GT;＆LT; / DIV＆GT;
＆LT;选择一个id =msgPostOn的风格=显示：无＆GT;＆LT; /选择＆GT;
＆LT; DIV的风格=显示：无ID =FBreauth＆GT;（没有足够的权限＆LT; A HREF =＃的onclick ='FBreauth（）;返回false;＆GT;授权此应用程式＆LT; / A＆gt;和＆LT; A HREF =＃的onclick ='FBrefresh（）;返回false'＆GT;清爽＆LT; / A＆GT;）＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
解决方案
如果你还在寻找一个解决这个问题，我相信我有什么事情，也许你已经设置的限制范围内正常工作。很简单，我们只是清除所有加载的变量和内存中的对象，并从我的测试中，包括＆LT;脚本＆GT; ，Facebook的高度
替换TEST.HTM单击处理程序与此，它应该工作
jQuery的（文件）。就绪（函数（）{
jQuery的（＃LNK）。点击（函数（五）{
如果（FB＆安培;＆放大器;的document.getElementById（脸谱 - jssdk））{//如果设置，重置
//删除的＆lt;脚本＆GT;
document.head.removeChild（的document.getElementById（脸谱 - jssdk））;
window.FB = NULL; //卸载的API
加载= NULL;
}
即preventDefault（）;
jQuery的（＃divContent）。负载（TEST.HTM，函数（）{
如果（装入）
{
FB.getLoginStatus（FBverifyLogin）;
}
其他
{
加载=真正的;
}
}）;
}）;
}）;
I have an issue with an FB.api only loading the first time a page is retrieved via AJAX. FB.getLoginStatus does work though.
Demo page: http://proof.ptly.com/test/fb/test-ajax.htm (clicking the load link works the first time but fails the second time it is clicked)
Expected/Desired behaviour: after giving permission to the app, it should list of all groups or pages associated to the user
Current behaviour: group list is only populated on first load. subsequent clicks do not load the list (FB.api does not return a response - view console for logging)
The reason behind this problem is that the page I am retrieving (test.htm) can't be changed but the page I am calling it from (test-ajax.htm) can. While I know this method isn't pretty nor ideal, I'm wondering if it is possible to overcome. Thus suggestions to change the underlying test.htm, while correct, won't solve the problem I'm having.
Sample code
Main page that calls the AJAX page
<html>
<head>
<title>My Facebook Login Page</title>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script>
var loaded = false;
jQuery(document).ready(function(){
jQuery("#lnk").click(function(e){
e.preventDefault();
jQuery("#divContent").load("test.htm", function(){
if(loaded)
{
FB.getLoginStatus(FBverifyLogin);
}
else
{
loaded = true;
}
});
});
});
</script>
</head>
<body>
<a href="#" id='lnk'>load</a>
<div id='divContent'></div>
</body>
</html>
AJAX page being retrieved
<script type="text/javascript">
var FB_config = {
API_ID: "347798778614308",
PERMISSIONS: "publish_stream,manage_pages,user_groups",
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
jQuery(document).ready(function(){
// initialise FB
window.fbAsyncInit = function() {
FB.init({
appId : '347798778614308',
status : true,
cookie : true,
xfbml : true,
oauth : true
});
FB.Event.subscribe('auth.statusChange', FBverifyLogin);
};
});
function FBverifyLogin(response) {
console.log("FBverifyLogin");
console.log(response);
jQuery("#FBreauth").hide();
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
ShowPostToFacebookCheckbox();
FBdisplayMyPages(response.authResponse);
jQuery("#btnLogin").hide();
checkPermissions();
} else if (response.status === 'not_authorized') {
} else {
// the user isn't logged in to Facebook.
jQuery("#btnLogin").show();
return false;
}
}
function checkPermissions(){
console.log("checkPermissions");
FB.api('/me/permissions', function(response) {
console.log("in checkPermissions fb.api");
console.log(response);
var permissions = FB_config.PERMISSIONS.split(",");
for(var i = 0; i < permissions.length; i++)
{
if(response.data[0][permissions[i]] == undefined || response.data[0][permissions[i]] != 1)
{
jQuery("#FBreauth").show();
break;
}
}
});
}
function FBdisplayMyPages(authResponse){
console.log("FBdisplayMyPages");
console.log(authResponse);
FB.api('/me/accounts', function(response) {
console.log("in FBdisplayMyPages fb.api");
console.log(response);
var str = "";
var name = "";
var count = 0;
str += '<optgroup label="Pages">';
for(var i = 0; i < response.data.length; i++)
{
if(response.data[i].category != "Application")
{
name = response.data[i].name;
str += '<option value="'+response.data[i].id+"_"+response.data[i].access_token+'">'+name+'</option>';
count++;
}
}
str += "</optgroup>";
jQuery("#msgPostOn").html(str);
FB.api('/me/groups', function(response) {
console.log("in FBdisplayMyPages fb.api 2");
console.log(response);
str = jQuery("#msgPostOn").html();
str += '<optgroup label="Groups">';
name = "";
for(var i = 0; i < response.data.length; i++)
{
if(response.data[i].category != "Application")
{
name = response.data[i].name;
str += '<option value="'+response.data[i].id+"_"+authResponse.accessToken+'">'+name+'</option>';
count++;
}
}
str += "</optgroup>";
jQuery("#msgPostOn").html(str);
switch(count)
{
case 0:
// notify that there are not pages. will post to personal page
str += '<option value="' + authResponse.userID + "_" + authResponse.accessToken + '">Personal Account</option>';
jQuery("#msgPostOn").html(str);
jQuery("#FBpostTo").text("No pages found. Posting to your personal account");
jQuery("#FBpostTo").show();
break;
case 1:
// only 1 page. hide it...
// notify name of page to update
jQuery("#msgPostOn").hide();
jQuery("#FBpostTo").html("Posting to <strong>" + name + "</strong>");
jQuery("#FBpostTo").show();
break;
default:
// notify user to select a page to post to
jQuery("#FBpostTo").text("There are multiple groups/pages associated with your account. Specify which to post to ");
jQuery("#FBpostTo").show();
jQuery("#msgPostOn").show();
}
});
});
}
function FBrefresh(){
console.log("FBrefresh");
FB.getLoginStatus(FBverifyLogin);
}
function FBreauth(){
console.log("FBreauth");
FB.ui(
{
method: 'oauth',
display: 'popup',
app_id: FB_config.API_ID,
client_id: FB_config.API_ID,
redirect_uri: "http://www.facebook.com/connect/login_success.html",
scope: FB_config.PERMISSIONS
}
);
}
function ShowPostToFacebookCheckbox()
{
console.log("ShowPostToFacebookCheckbox");
jQuery('#postToFacebook2').css('display', 'inline');
jQuery('#LabelForFacebook').css('display', 'inline');
}
</script>
<div id="fb-root"></div>
<div id="postToFacebookField" class="fieldContainer checkbox ">
<div id="btnLogin" class="fb-login-button" scope="publish_stream,manage_pages,user_groups">Login with Facebook</div>
<input type="checkbox" style="display:none" name="postToFacebook2" value="on" id="postToFacebook2">
<label style="cursor: pointer; display:none" for="postToFacebook2" id="LabelForFacebook">Post to Facebook Page</label>
<div id="FBpostTo" style="display: none"></div>
<select id="msgPostOn" style="display: none"></select>
<div style="display: none" id="FBreauth">(Insufficient permissions. <a href ='#' onclick='FBreauth(); return false;'>Authorize this app</a> and <a href='#' onclick='FBrefresh() ; return false'>refreshing</a>)</div>
</div>
解决方案
If you are still looking for a solution to this problem, I believe I have something that might work within the constraints that you have set. Quite simply, we just clear all the loaded variables and objects in memory, and from my tests, including the <script> that facebook attaches.
Replace the click handler in test.htm with this and it should work
jQuery(document).ready(function(){
jQuery("#lnk").click(function(e){
if(FB && document.getElementById("facebook-jssdk")){ //if set, reset
//removes the <script>
document.head.removeChild(document.getElementById("facebook-jssdk"));
window.FB=null; //unloads the APIs
loaded=null;
}
e.preventDefault();
jQuery("#divContent").load("test.htm", function(){
if(loaded)
{
FB.getLoginStatus(FBverifyLogin);
}
else
{
loaded = true;
}
});
});
});
相关推荐
精彩图集
