jQuery fb登录弹出块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16559115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fb login popup block
提问by Rohit Agrawal
I am making using fb login feature but problem comming to me is that whenever I click on the fb login button before page media loading is completed, it blocks the popup for fb login but if I click on fblogin after a second passed to loading event it works
我正在使用 fb 登录功能，但我遇到的问题是，每当我在页面媒体加载完成之前单击 fb 登录按钮时，它都会阻止 fb 登录的弹出窗口，但是如果我在第二个传递给加载事件后单击 fblogin作品
Here is the function I am using:
这是我正在使用的功能：
function fb_login() {
var email='';
console.log(loginClassbackQueue);
// console.log('user wants to login with fb');
FB.getLoginStatus(function(response) {
if(response.status!='connected'){
FB.login(function(response) {
// console.log(response);
if (response.authResponse) {
// console.log('user logged in successfully');
// console.log(response);
email = update_f_data_login(response);
$('#fb_login_popup, #popup_overlay').hide();
// loginme(email);
}
else {
loginClassbackQueue = [];
// console.log('user failed to login');
}
// console.log('fb login completed successfully');
}, {scope:"email,user_birthday,user_likes,user_location,friends_likes,publish_actions"}
);
}
else{
// console.log('logged in and connected');
email = update_f_data_login(response);
$('#fb_login_popup, #popup_overlay').hide();
}
});
}
The same action when I do on this site http://fab.com/it open popups always never block a popup.
当我在这个网站http://fab.com/上做同样的操作时，它打开的弹出窗口永远不会阻止弹出窗口。
回答by Fisch
You cannot call FB.loginfrom the callback of FB.getLoginStatus.
您不能FB.login从 的回调中调用FB.getLoginStatus。
Browsers tend to block popup windows of the popup is not spawned as an immediate result of a user's click action.
浏览器往往会阻止弹出窗口的弹出窗口不是用户点击操作的直接结果。
Because FB.getLoginStatusdoes an ajaxcall and you call FB.loginon it's response, the popup that would open as a result of this call is blocked.
因为进行FB.getLoginStatus了ajax呼叫并且您呼叫FB.login了它的响应，所以由于该呼叫而打开的弹出窗口被阻止。
A solution to your problem would be to call FB.getLoginStatuson page load and use the response inside your fb_login()method.
您的问题的解决方案是调用FB.getLoginStatus页面加载并在您的fb_login()方法中使用响应。
回答by AndrewF
It's perfectly fine to call FB.loginfrom the callback of FB.getLoginStatus, as long as you are confident that the login status has already been loadedinternally. To do this, use one of these:
只要您确信登录状态已经在内部加载，就可以FB.login从 的回调中调用。为此，请使用以下方法之一：FB.getLoginStatus
FB.init({..., status: true, ... }).FB.getLoginStatus(...)FB.login(...)FB.ui(...)
FB.init({..., status: true, ... }).FB.getLoginStatus(...)FB.login(...)FB.ui(...)
Technically all of these options use FB.ui. The async process has to complete, which could take a few seconds. As long as you have already used one of the methods above to make a cross-domain call with FB, and that async process has completed, getting the login status will not make an async call, and the popup will not be blocked.
从技术上讲，所有这些选项都使用FB.ui. 异步过程必须完成，这可能需要几秒钟。只要你已经使用过上述方法之一与FB进行了跨域调用，并且异步过程已经完成，获取登录状态不会进行异步调用，并且不会阻止弹出窗口。
You should also make sure notto specify truefor the second parameter, as in FB.getLoginStatus(..., true);.
您还应该确保不要指定true第二个参数，如FB.getLoginStatus(..., true);.
回答by Rusly - Mices
Make sure you set statusto true, this will fixed popup blocker issue.
确保将status设置为true，这将修复弹出窗口阻止程序问题。
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.5', // use graph api version 2.5
status : true // set this status to true, this will fixed popup blocker issue
});
回答by Marcos J.D Junior
I had the same problem and it kick my head for 3 days. I did stumble on the above mentioned solutions and they worked in Firefox and Edge but in Chrome not matter what ever i did i still got blocked left right and center.The other problem was when i called the function from a button press event the login dialog was not block but it didn't get any responses after the login dialog closes for further actions so i got stuck. So my solution is as follow, but you don't need to press the login in button it will redirect to the FB-login page without a button press event, and on return continue with all the other sdk steps. Just add this to your code and see if it helps, from there adjust according to your need
我遇到了同样的问题，它让我头疼了 3 天。我确实偶然发现了上面提到的解决方案，它们在 Firefox 和 Edge 中工作，但在 Chrome 中不管我做了什么，我仍然被左右和中心阻止。另一个问题是当我从按钮按下事件调用该函数时登录对话框没有被阻止，但在登录对话框关闭以进行进一步操作后它没有得到任何响应，所以我被卡住了。所以我的解决方案如下，但你不需要按下登录按钮，它会重定向到 FB 登录页面而没有按钮按下事件，并在返回时继续所有其他 sdk 步骤。只需将此添加到您的代码中，看看它是否有帮助，然后根据您的需要进行调整
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
document.getElementById('Image2').style.display = "none";
document.getElementById('mail').style.display = "in-line";
testAPI();
} else {
// The person is not logged into your app or we are unable to tell.
window.alert("Fa?a login no facebook antes de continuar - Obrigado");
window.location.href = 'https://www.facebook.com/dialog/oauth' +
'?client_id=55215442252214521548' +
'&scope=public_profile,email,user_friends' +
'&redirect_uri=' + encodeURIComponent(document.URL);
document.getElementById('Image2').style.visibility = "hidden";
document.getElementById('mail').style.display = "in-line";
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function (response) {
statusChangeCallback(response);
});
}
