我使用Facepile pluging(iFrame)顯示連接到我的站點的用戶的朋友。但是,如果用戶未登錄或沒有連接的朋友,則會有一個大的空白框代替插件的位置。如果用戶未登錄或沒有朋友連接到站點,請隱藏facepile
有沒有什麼辦法可以在這種情況下隱藏div/iframe?任何JS欺騙我可以在這裏使用?
我使用Facepile pluging(iFrame)顯示連接到我的站點的用戶的朋友。但是,如果用戶未登錄或沒有連接的朋友,則會有一個大的空白框代替插件的位置。如果用戶未登錄或沒有朋友連接到站點,請隱藏facepile
有沒有什麼辦法可以在這種情況下隱藏div/iframe?任何JS欺騙我可以在這裏使用?
你基本上可以使用下面的代碼。在一個div中包含facepile iframe,並在初始化後使用FB.getLoginStatus調用確定用戶是否已登錄。如果用戶未登錄,則隱藏div。或者默認情況下它會顯示該div。
<script>
window.fbAsyncInit = function() {
FB.init({
appId: app-id, // App ID
channelUrl: '//localhost:1105/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
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
document.getElementById('fb-login').innerHTML = 'Logout';
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook. so hide the facepile
$('#facepileDiv').hide();
console.log("hello");
}
});
};
</script>
<div id="facepileDiv">
<iframe src="http://www.facebook.com/plugins/facepile.php?
app_id=yourappidhere" scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:200px;" allowTransparency="true"></iframe>
</div>
D'oh!謝謝... – psychotik 2012-04-09 18:29:19
非常感謝「沒有登錄的部分」,但你沒有回答「或沒有朋友連接到網站」。是否有可能檢查這個? – MaximeBernard 2012-12-15 12:00:59
作爲補充或替代Nikhil的上述非常有用的答案:
不幸的是,當您添加其他內容之間的facepile DIV,上述方案將導致一些「閃爍」藏身時,所以我改變了它一點點。現在div默認默認隱藏,並在用戶登錄時顯示。
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '{app_id}', // App ID from the App Dashboard
channelUrl : '//path/to/channel.html', // Channel File for x-domain communication
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
FB.getLoginStatus(function (response) {
if ((response.status === 'connected') || (response.status === 'not_authorized')) {
$('#facepileDiv').show();
}
});
};
// Load the SDK's source Asynchronously
(function(d, debug){
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" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
</script>
<div id="facepileDiv" style="display: none">
<iframe src="http://www.facebook.com/plugins/facepile.php?app_id={app_id}" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px;height:80px;margin-top: 10px;" allowTransparency="true"></iframe>
</div>
你可以顯示你的代碼嗎? – 2012-04-06 17:06:53
請參閱此處的iframe代碼:https://developers.facebook.com/docs/reference/plugins/facepile/ – psychotik 2012-04-06 17:25:34
您是否嘗試爲背景顏色設置樣式屬性?