2016-09-27 16 views
-1

私はFacebook JavaScript SDKを使用して、ユーザーが自分のアプリにログインできるようにしています。私は別のJavaScriptファイルと共にHTMLファイルにFacebook SDKを使用しています。 2番目のJSファイルは、SDK内部からFBオブジェクトにアクセスします。私はFacebook JS SDKの初期化が完了するまで、JS関数の実行を遅らせる方法

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

を言ってエラーが出るので

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

のようなファイルController.js内部の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ファイルは、Facebook SDKが初期化される前に実行されています。 bodyタグの外に読み込むために2番目のJSファイルを設定すると、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 + '!'; 
     }); 
    } 
+0

どうやってウィンドウ?FB? – darham

+0

は読み込み中でもfacebook.jsですか?また、bodyタグを閉じた後にスクリプトを作成しないでください。 – charlietfl

+0

@darham - window.FBについてはどうですか?つまり、window.FB関数はウィンドウ内にFBオブジェクトが検出されたときにのみ実行されますか? –

答えて

0

です。 注:完璧な解決策はなく、パッチワークの仕事が増えています。コメントに記載されている解決策は、自分の状況では機能しなかったため、私は使用しませんでした。うまくいけば、これは他の人にとって役に立つかもしれない。

ここで、この答えを見つけ

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オブジェクトが定義されていない特定の状況であったのに対し、他の時点では機能していたためです。繰り返しますが、これは素晴らしい解決策ではありませんが、それは私の仕事です。

関連する問題