31

我正在使用 fb 登录功能，但给我带来的问题是，每当我在页面媒体加载完成之前单击 fb 登录按钮时，它都会阻止 fb 登录的弹出窗口，但是如果我在第二次传递给加载事件后单击 fblogin 它作品

这是我正在使用的功能：

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();
    }

});

}

当我在此站点http://fab.com/上执行相同操作时，它打开弹出窗口始终不会阻止弹出窗口。

4

4 回答 4

56

您不能FB.login从 的回调中调用FB.getLoginStatus。

浏览器倾向于阻止弹出窗口的弹出窗口不是作为用户点击动作的直接结果产生的。

因为FB.getLoginStatus进行ajax呼叫并且您调用FB.login它的响应，所以由于此呼叫而打开的弹出窗口被阻止。

解决您的问题的方法是FB.getLoginStatus在页面加载时调用并在您的fb_login()方法中使用响应。

于 2013-05-15T08:02:54.653 回答
41

只要您确信登录状态已经在内部加载FB.login，就可以从 的回调中调用。为此，请使用以下之一：FB.getLoginStatus

  • FB.init({..., status: true, ... }).
  • FB.getLoginStatus(...)
  • FB.login(...)
  • FB.ui(...)

从技术上讲，所有这些选项都使用FB.ui. 异步过程必须完成，这可能需要几秒钟。只要你已经使用上述方法之一与FB进行跨域调用，并且该异步进程已经完成，获取登录状态不会进行异步调用，弹窗也不会被阻塞。

您还应该确保不要指定true第二个参数，如FB.getLoginStatus(..., true);.

于 2013-08-12T20:53:37.390 回答
13

确保将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
  });
于 2016-06-16T03:04:53.363 回答
1

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

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

            });
        }
于 2017-05-15T07:58:46.063 回答