如果用户已经登录，隐藏FB登录按钮

问题描述：

这似乎是一个简单的问题，其他人已经发布，但答案仍然没有回答。具体来说，我一再经历了这两个（here和here）SO问题，我只是没有与我的情况联系起来。如果用户已经登录，隐藏FB登录按钮

对我来说，我想我会将登录按钮封装在一个div中，然后根据登录状态更改div可见性。 div确实改变了可见性，但fb登录按钮仍然可见？

这里是我在div包裹登录按钮代码：

....snip.... 
<div id="fblogin"> 
    <table align="center" style="text-align:center;"> 
     <tr>........</tr> 
     <tr> 
      <td> 
       <div id="fb-root"></div> 
        <span id="fb-login"> 
         <div 
          class="fb-login-button" 
          onlogin="afterFbLogin()" 
          data-show-faces="false" 
          data-width="200" 
          data-max-rows="1" 
          data-scope="publish_stream"> 
         </div> 
        </span> 
............snip.............

这里是我的FB.Init，并检查登录状态：

window.fbAsyncInit = function() { 
    FB.init({ 
     appId: '352810974851050',  // App ID 
     channelUrl: '//www.domain.com/channel.html', 
     status: true, // check login status 
     cookie: true, // enable cookies 
     xfbml: true // parse page for xfbml or html5 like login button below 
    }); 

    // Put additional init code here 
    FB.getLoginStatus(function (response) { 

     if (response.status === 'connected') { 
      var uid = response.authResponse.userID; 
      var accessToken = response.authResponse.accessToken; 
      ShowFbLogin(false); 
     } else if (response.status === 'not_authorized') 
.........snip...................

并为JS代码ShowFbLogin功能

 function ShowFbLogin(ShowLogin) 
     { 
      var div_FBLogin = document.getElementById('fblogin'); 
      var spn_FBLogin = document.getElementById('fb-login'); 
      var div_FBShare = document.getElementById('fbshare'); 

      if (ShowLogin) 
      { 
       div_FBLogin.style.visibility = 'visible'; 
       div_FBShare.style.visibility = 'hidden'; 
      } 
      else 
      { 
       div_FBLogin.style.visibility = 'collapse'; 
       spn_FBLogin.style.visibility = 'collapse'; 
       div_FBShare.style.visibility = 'visible'; 
      } 
     }

http://*.com/questions/1254999/how-to-dynamically-show-hide-a-facebook-login-button?lq=1检查一下。它可能会帮助你。 – 2013-08-22 15:25:37

答

尝试，而不是使用display: none为#fb-login元素。 visibility: collapse用于表格元素;应该像隐藏可视性一样，即为隐形按钮预留空间。 visibility: collapse也根本不适用于IE8。

我不觉得哑！这是完全正确的，我不需要先测试它。 – GPGVM

如果用户已经登录，隐藏FB登录按钮

相关推荐