English 中文(简体)
是否有办法查明Facebook Javascript SDK是否成功装载?
原标题:Is there a way to detect if the Facebook Javascript SDK loaded successfully?

I use Facebook as the membership system of my website. It uses the code to generate a login control, allowing users to login via their facebook account. It s essentially one click if they re already a member, 2 if they re not (for granting permissions).

我提出一个问题,尽管......反馈意见表明,日志吨的吨位总是正确装载。 它不仅没有装上面对面的标识,而是简单地指出(正文中)“用面板loglog”——如果控制成功负荷,则该日志会说。

测试表明,当面板“javascript SDK”未能完全装满时(无论出于何种原因)就会出现这种情况。 我看到了在座标中阻止SDK装载的情况。

为了更好地支持这一问题,我如何察觉手法是否装满并准备就绪? 这样,如果失败,我就能够为使用者留下某种笔记。

这里,它目前如何添加到网页上:

<script>
window.fbAsyncInit = function () {
FB.init({
  appId:  *************** ,
  status: true,
  cookie: true,
  xfbml: true
});
FB.Event.subscribe( auth.login , function (response) {
  window.location.reload();
});

};
(function () {
  var e = document.createElement( script ); e.async = true;
  e.src = document.location.protocol +  //connect.facebook.net/en_US/all.js ;
  document.getElementById( fb-root ).appendChild(e);
} ());

</script>
最佳回答

页: 1 Javascript Library Asynchronously 在<条码>上设置了所有与你的财务和财务局相关的职能。 方法:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      :  YOUR_APP_ID , // App ID
      channelUrl :  //WWW.YOUR_DOMAIN.COM/channel.html , // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // 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";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

This code loads the SDK asynchronously so it does not block loading other elements of your page. This is particularly important to ensure fast page loads for users and SEO robots.

The URLs in the above code are protocol relative. This lets the browser to load the SDK over the same protocol (HTTP or HTTPS) as the containing page, which will prevent "Insecure Content" warnings.

The function assigned to window.fbAsyncInit is run as soon as the SDK is loaded. Any code that you want to run after the SDK is loaded should be placed within this function and after the call to FB.init. For example, this is where you would test the logged in status of the user or subscribe to any Facebook events in which your application is interested.

一个快速的例子如下:

<div id="fb-root"></div>
<script>
  var isLoaded = false;
  window.fbAsyncInit = function() {
    FB.init({
      appId      :  YOUR_APP_ID , // App ID
      channelUrl :  //WWW.YOUR_DOMAIN.COM/channel.html , // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
    isLoaded = true;

    // Additional initialization code here
  };

  function checkIfLoaded() {
    if(isLoaded) console.log("LOADED!");
    else console.log("NOT YET!");

    return false;
  }

  // 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";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>
<a href="#" onclick="checkIfLoaded();">Check</a>

enter image description here
(Just clicked the check link a couple of times)


请注意,您仍可建造LoginLink服务器边和WITHOUT。 Java本。 http://github.com/facebook/php-sdk”rel=“noretinger” PHP-SDK:

$loginUrl = $facebook->getLoginUrl();
...
...
<a href="<?php echo $loginUrl; ?>">
    <img src="http://static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif">
</a>
问题回答

三、KSDK装满时的事件:

window.fbAsyncInit = function() {
  FB.init({appId: "#{KeyManager.facebook_app_id}", status: true, cookie: true, xfbml: true});
  jQuery( #fb-root ).trigger( facebook:init );
};

并听取这样的活动:

$("#fb-root").bind("facebook:init", function() {
  ..
});

如果你使用j Query(你在FB初始化之前装满了jQuery),你可以使用被推迟的假肢进行额外初步处理。

<script>
    window.fbLoaded = $.Deferred();

    window.fbAsyncInit = function() {

        FB.init({
            appId      :  ---------- ,
            xfbml      : true,
            status     : true,
            version    :  v2.7 
        });

        window.fbLoaded.resolve();
    };


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

</script>

然后,在其他地方(在一份联合材料档案中),你可以这样做(事实上,这种方法的关键在于你能够把它放在你想要的很多地方,而且他们都会被触发):

 window.fbLoaded.done(function () { alert( FB initialized ); });

注:如果初始化完成,请添加<代码>done 它将立即开火(即移交工作的方式)。 因此,只要你想要,你就可以做到这一点。

确保对你想要的行为进行检验,如果从来不首先引起注意(对<代码>(功能(d,s,id)作正确评论)。 页: 1

在装载FB JS SDK sync/async之后,仅看FB物体:

            if (typeof FB !==  undefined ) {
                alert("FB JS API is available now");
            } else {alert("do something...")}

That s a enough check to call any Facebook JS API related method safely.

Promise-based version, for modern browsers

// Load Facebook JS SDK
(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 =  https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11 ;
  fjs.parentNode.insertBefore(js, fjs);
}(document,  script ,  facebook-jssdk ));

// Create a new promise, set to resolve using the global function `fbAsyncInit`,
// which the Facebook JS SDK will call once it s ready.
new Promise((resolve, reject) => {
  window.fbAsyncInit = resolve;
}).then(() => {
  // ... your code here ...
});

The What globals do this JS file introduction?

让我们说,这创造了一个条件。

var FaceBook = function() {//make friends! Or whatever...}

您可以测试<代码>if(FaceBook),并来自该编码。

他们似乎可能给你某种装满框架时的负荷活动,以便发言。

According to this page http://www.techsirius.com/2014/04/detect-social-SDK-didnt-load.html

$(window).load(function(){
   if(typeof window.FB ==  undefined ){
       alert( Facebook SDK is unable to load, display some alternative content for visitor );
   }
   else{
      alert( Facebook is working just fine );
   }
});

动手法(在小 j中添加文字标签)并检查错误/成功事件。

var FB;
jQuery.fbInit = function(app_id) {
    window.fbAsyncInit = function() {
        FB.init({
            appId      : app_id, 
            status     : true, 
            channelUrl:  # , 
            cookie     : true, 
            xfbml      : true  
        });
        FB = FB;
        getLoginStatus();
    };
    // Load the SDK Asynchronously
    (function(d){
        var js, id =  facebook-jssdk ; if (d.getElementById(id)) {return;}
        js = d.createElement( script ); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/it_IT/all.js";
        d.getElementsByTagName( head )[0].appendChild(js);
    }(document));

    $( <div /> ).attr( id , fb-root ).appendTo( body );
};

/**
 * https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
 */
function getLoginStatus() {
    FB.getLoginStatus(function(response) {
        if (response.status ===  connected ) {
            $( #fb-root ).trigger( facebook:init ,[response]);
        } else if (response.status ===  not_authorized ) {
            $( #fb-root ).trigger( facebook:init ,[response]);
        } else {
            $( #fb-root ).trigger( facebook:init ,[response]);
        }
    });
}

如果你想从另一个javascript那里检查情况(根据@Leo Romanovsky的建议)

 $("#fb-root").on("facebook:init", function(event, response) {
        if(response.status ===  connected ) {
            alert("logged with FB")
        }else{
            alert("No Logged with FB")
        }

    });

我从几天起就使用:

var isLoaded = false;

$(document).on( DOMSubtreeModified , function () {
    if ($( #fb-root ).length && !isLoaded) {
        isLoaded = true;

        // ...
    }
});

你认为什么?

如其他答复所述; 罗马诺夫斯基,如果SDK成功,最好的检测方法是在FbAsyncInit被传唤时引发事件。

如果这次活动被抓获,SDK就会被装上。 下面的法典说明如何做到这一点:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      :  YOUR_APP_ID , // App ID
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Fire an event when the FB library asynchronously is loaded
    $("#fb-root").trigger("facebook:init");

    // Additional initialization code here
  };

  // 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"));
</script>

// Somewhere else in the code
$(document).ready(function () {
    $("#fb-root").bind("facebook:init", function () {
        console.log("The event is fired FB SDK object is ready to be used.");
    });
});

如果事件没有发射,你可以增加一个时间来检查FB物体是否未界定并显示适当的信息。

说明1: 在该事件发生之前,会稍有拖延。

<>说明2:“反馈是指日 is吨吨的吨 t总装正确”。 我知道,FFv49的私人浏览阻碍着避风的呼吁。





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签