fb登录弹出框

2020/12/31 14:32 · jquery ·  · 0评论

我正在使用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/上执行相同的操作时,打开弹出窗口始终不会阻止弹出窗口。

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

浏览器倾向于阻止弹出窗口,这些弹出窗口并非是由于用户单击操作而直接产生的。

因为FB.getLoginStatus有一个ajax呼叫,而您呼叫FB.login了它的响应,所以将阻止由于该呼叫而打开的弹出窗口

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

只要您确信登录状态已经在内部加载FB.login则从的回调中调用是完全可以的为此,请使用以下之一:FB.getLoginStatus

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

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

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

确保将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
  });

我遇到了同样的问题,它让我震惊了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);

            });
        } 
本文地址:http://jquery.askforanswer.com/fbdengludanchukuang.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!