有没有一种方法来检测,如果Facebook的SDK的JavaScript加载成功?

我使用Facebook作为我网站的会员制度。 它使用代码来生成一个登录控制,允许用户通过他们的Facebook帐号登录。 它本质上是点击,如果他们已经是会员,2如果他们不(授予权限)。

我有一个问题,虽然...反馈暗示登录按钮并不总是正确加载。 这是如果控制成功加载的登录按钮会说些什么 - 而不是加载Facebook登录控制,它只是(文本)“通过Facebook登录”状态。

测试表明,当Facebook的的JavaScript SDK无法完全加载(无论何种原因)会发生什么。 我见过其中的URL#防止SDK加载实例。

为了更好地支持这个问题,我怎么会去检测,如果JavaScript的SDK下载,而Facebook是准备好了? 这样一来,如果失败的话,我可以留下一些笔记的用户。

下面是它是如何目前添加到页面:

<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>

--------------解决方案-------------

您应该加载JavaScript库异步,把里面所有FB相关的功能window.fbAsyncInit方法:

<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>

此代码加载SDK异步所以它不会阻止加载网页的其他元素。 这一点尤为重要,以确保用户和搜索引擎机器人快速加载页面。

在上面的代码的URL相协议。 这让浏览器加载在同一协议(HTTP或HTTPS)作为包含页面,这将防止“不安全内容”警告SDK。

分配给函数window.fbAsyncInit是一旦SDK是装载运行。 要运行后SDK是装载的代码应该放在这个函数中,并调用后FB.init 。 例如, 有没有一种方法来检测,如果Facebook的SDK的JavaScript加载成功?

用户或订阅中,你的应用程序有兴趣的任何Facebook的事件。

一个简单的例子如下:

<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>

有没有一种方法来检测,如果Facebook的SDK的JavaScript加载成功?

刚才单击的check链接几次



请注意,您仍然可以构建登录链接服务器端和没有JavaScript。 例如使用PHP-SDK:

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

当SDK是加载触发事件:

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

的catch这样的:

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

什么全局这是否JS文件介绍?

比方说,它会创建一个

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

您可以测试if (FaceBook) ,并从那里走。

这很可能是他们给你一些时,他们的框架是启动了负载事件,可以这么说。

只要看看FB对象加载JS FB SDK同步/异步给出后:

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

这是一个足够的检查,以安全地调用任何Facebook的JS API相关的方法。

动态加载脚本(添加从JS脚本标记),并检查错误/成功事件。

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")
}

});

根据这一页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');
}
});

分类:JavaScript的 时间:2015-03-15 人气:0
本文关键词: JavaScript中,SDK,脸谱
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 3.457 (s). 10 q(s)