即使我剛剛使用它，FB仍未定義

Question

我正在嘗試將Facebook Like按鈕添加到我正在創建的小部件中。 我用來將Facebook喜歡按鈕添加到我的頁面的代碼如下：

widget.html

<body>
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId  : '263071593731910',
            status : false, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true  // parse XFBML
        });
    };
    (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());
</script>
<div id="fb-button"></div>
<script type="text/javascript" src="widget.js"></script>

widget.js

$(function(){
var fb = $(document.createElement("fb:like"));
fb.attr({
    href: data.facebook,
    send: false,
    layout: 'button_count',
    width: 70,
    'show_faces': false
});
$("#fb-button").empty().append(fb);
FB.XFBML.parse($("#fb-button").get(0));
FB.Event.subscribe('edge.create',changeView);
});

*在JavaScript中也存在changeView函數。

當我運行代碼時，我收到一個錯誤： Uncaught ReferenceError: FB is not defined即使創建了按鈕，也Uncaught ReferenceError: FB is not defined 。 該錯誤指向包含FB.XFBML.parse代碼的行。 我的JavaScript需要做些什么嗎？

Answer 1

我遇到了這個問題並且解決了它與Amry提供的解決方案類似，所以我在這里發布它以防其他人需要使用它。

我初步假設在fbAsyncInit方法中進行的FB初始化調用會立即初始化，所以我也在$(document).ready()方法中編寫了我對FB對象的使用。 事實並非如此。 頁面加載完成初始化后，fbAsyncInit需要相當長的時間。 這是我的解決方案，在我的網站上使用jQuery時：

<script type="text/javascript">

  window.fbAsyncInit = function() {

    FB.init({
      appId      : 'your_app_id', // App ID
      channelUrl : 'your channel',
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
    jQuery(document).trigger('FBSDKLoaded'); //This is the most important line to solving the issue
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=269187653191150";
     ref.parentNode.insertBefore(js, ref);
   }(document));

</script>

最后一項任務是簡單地將$(document).ready()代碼切換為事件的綁定。 這就是你使用FB對象的地方。

(function($) {
    $(document).bind('FBSDKLoaded', function() {
        //Code using the FB object goes here.
    });

})(jQuery);

有一件事我還應該提一下：Firefox比Chrome等Webkit瀏覽器更容忍。 我無法弄清楚為什么我的jQuery沒有在Chrome中正常工作......好吧，這就是原因。

我希望這可以幫助別人。

Answer 2

從window.fbAsyncInit開始的那個大腳本塊的重點是Facebook SDK被異步加載。

即使您已經在jQuery文檔就緒回調中對FB進行了調用，但這還不足以確保在執行該代碼時加載SDK。

幸運的是， window.fbAsyncInit 正是出於這個目的：在SDK加載之前它不會運行。

來自Facebook的文檔：

分配給window.fbAsyncInit在加載SDK后立即運行。 加載SDK后要運行的任何代碼都應放在此函數中，並在調用FB.init之后。 例如，您可以在此處測試用戶的登錄狀態或訂閱您的應用程序感興趣的任何Facebook事件。

Answer 3

FB還沒有定義在那個時間點。 你還沒有使用它，你只需要早點輸入它。 文檔准備好后，將執行FB.XFMBL.parse行。 同樣適用於//connect.facebook.net/en_US/all.js行。 因此，如果從同一事件執行代碼將首先執行哪個代碼並不可靠。

你可以做的是以某種方式從window.fbAsyncInit你想要執行的代碼。 從那時起，您可以確定FB已准備好使用。

如果您不想混合widget.js中的代碼，可以使用jQuery的自定義事件。 所以不要使用$(function() { ... }); ，你會有這樣的東西：

$(window).bind('fbAsyncInit', function() {
  // Your code here
});

然后你將在FB.init()行之后調用window.fbAsyncInit調用$(window).triggerHandler('fbAsyncInit') 。

即使我剛剛使用它，FB仍未定義

問題描述

3 個解決方案

解決方案1
15 2012-12-19 17:14:50

解決方案2
15 已采納 2011-10-12 23:24:36

解決方案3
5 2011-10-12 23:35:58

即使我剛剛使用它，FB仍未定義

問題描述

3 個解決方案

解決方案1 15 2012-12-19 17:14:50

解決方案2 15 已采納 2011-10-12 23:24:36

解決方案3 5 2011-10-12 23:35:58

解決方案1
15 2012-12-19 17:14:50

解決方案2
15 已采納 2011-10-12 23:24:36

解決方案3
5 2011-10-12 23:35:58