Question

所以，我正在使用Facebook JavaScript SDK来允许用户登录我的应用程序。我在HTML文件中使用Facebook SDK以及另一个JavaScript文件。第二个JS文件从SDK内部访问FB对象。 HTML基本上就像这样设置

<!DOCTYPE HTML>
<html>
     <body>
          <script src = 'FacebookSDK.js' type = 'text/javascript'></script>
    </body>
          <script src = 'Controller.js' type = 'text/javascript'></script>
</html>

当我尝试访问Controller.js文件中的FB对象时，如此

            FB.getLoginStatus(function(response) {
                console.log(response.authResponse.userID);
            });

我收到错误说

pollcreationClient.js:4 Uncaught ReferenceError: FB is not defined

所以，显然我的Controller.js文件正在Facebook SDK初始化之前执行。我认为将第二个JS文件设置为在body标签之外加载将为SDK提供足够的时间来加载和初始化。但是，事实并非如此。我该怎么做才能确保我调用FB对象的Controller.js文件函数在SDK文件执行完毕之后才会执行？

供参考，这是Facebook SDK文件

// This is called with the results from from FB.getLoginStatus().
    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.
            testAPI();
        }
        else if (response.status === 'not_authorized') {
            // The person is logged into Facebook, but not your app.
            document.getElementById('status').innerHTML = 'Please log ' +
                'into this app.';
        }
        else {
            // The person is not logged into Facebook, so we're not sure if
            // they are logged into this app or not.
            document.getElementById('status').innerHTML = 'Please log ' +
                'into Facebook.';
        }
    }

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

    window.fbAsyncInit = function() {
        FB.init({
            appId: '332044557128106',
            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
        });

        // Now that we've initialized the JavaScript SDK, we call 
        // FB.getLoginStatus().  This function gets the state of the
        // person visiting this page and can return one of three states to
        // the callback you provide.  They can be:
        //
        // 1. Logged into your app ('connected')
        // 2. Logged into Facebook, but not your app ('not_authorized')
        // 3. Not logged into Facebook and can't tell if they are logged into
        //    your app or not.
        //
        // These three cases are handled in the callback function.

        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });

    };

    // Load the SDK asynchronously
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    // Here we run a very simple test of the Graph API after login is
    // successful.  See statusChangeCallback() for when this call is made.
    function testAPI() {
        console.log('Welcome!  Fetching your information.... ');
        FB.api('/me', function(response) {
            console.log('Successful login for: ' + response.name);
            document.getElementById('status').innerHTML =
                'Thanks for logging in, ' + response.name + '!';
        });
    }

Answer 1

我找到了解决问题的快速解决方法。注意：它不提供完美的解决方案，更多的拼凑工作。我没有使用评论中提到的解决方案，因为它们在我的情况下不起作用。希望这可能对其他人有用。

在这里找到这个答案 How to workaround 'FB is not defined'?

if (typeof FB !== 'undefined' && FB !== null) {
            FB.Event.subscribe('auth.authResponseChange', function() {
                FB.getLoginStatus(function(response) {
                    console.log('Response from in here');
                    console.log(response);
                    $('.submit-butt').on('click', function() {
                        console.log('From in here');
                        ajaxFunctions.ready(ajaxFunctions.ajaxRequest('POST', appUrl + '/poll-create', response.authResponse, function(data) {

                        }));
                    });
                });
            });
        }else{
            location.reload();
        }

基本上，这会检查FB对象是否已定义并存在。如果是，它运行代码，如果不是，我将页面设置为重新加载。这对我有用，因为我的问题是在某些情况下FB对象没有被定义，而在其他时候有效。同样，这不是一个很好的解决方案，但它可以帮助我。

如何延迟执行JS函数直到Facebook JS SDK完成初始化

1 个答案: