0

这就是我设置登录/注册流程的方式。在 index.html 页面上有一个链接。单击它后，您将被发送到第二个页面，在该页面中检查您的登录状态，如果您未注册或未登录，则会显示 fb 登录/注册框。我所做的是使标签在页面上不可见，直到检查登录状态后？选中后，如果用户未登录或未注册，我希望它变得可见，但它不可见。在检查登录状态之前隐藏注册/登录框的可见性的最佳方法是什么。我不想使用 facebooks login() 函数，因为我不想弹出窗口。我想使用 XFBML 标签。下面是我的代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script >
  <base href="http://spilot.koding.com/">


  </script>
</head>
<body>
<div id="fb-root"></div>
<script>


  // Additional JS functions here
 window.fbAsyncInit = function() {
    FB.init({
      appId      : '3967205****88', // App ID
      channelUrl : '//http://spilot.koding.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
    });


    // get login status

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    // connected
  } else if (response.status === 'not_authorized') {
    // not_authorized


        document.getElementByName("login").style.visibility = visible;

  } else {
    // not_logged_in

      document.getElementByName("login").style.visibility = visible;

  }
 });
  };



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


<div id="fb-root" name="login" style="visibility:hidden">
<script src="https://connect.facebook.net/en_US/all.js#appId=396720557089188&xfbml=1"></script>

<fb:registration 
  fields="name,birthday,gender,location,email" 
  redirect-uri="http://spilot.koding.com/signedRequest.php" width="530">
</fb:registration> 
</div>

</body>
</html>
4

1 回答 1

0

这是对我有用的解决方案。我决定改用注册插件。我将 iframe 放在一个 div 中并将 div 的可见性设置为“隐藏”，然后在它检查登录状态的初始化代码中，我调用一个使用 document.getElementById().style.visibility ="visible" 的函数来抓取div 并更改其可见性。确保所有需要引号的东西都有它们，这是我最初的错误之一。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script >
  <base href="http://spilot.koding.com/">


  </script>
</head>
<body>
<div id="fb-root"></div>
<script>


  // Additional JS functions here
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '396720557******', // App ID
      channelUrl : '//http://spilot.koding.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 init code here
    FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    // connected

  } else if (response.status === 'not_authorized') {
    // not_authorized
    ///log function will change div visibility to "visible"
   log();

  } else {
    // not_logged_in
   log();

  }
 });//closes fb.getLoginStatus
  };// closes fbAsyncInit


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

  //change div visibility to visible

  var log = function(){
     document.getElementById('login').style.visibility = "visible";


  }//closes function log()
</script>

//put iframe inside a div and set the div's visibility to hidden. 

<div id ="login" style = "visibility:hidden" >
<iframe src="https://www.facebook.com/plugins/registration?
             client_id=396720557089188&&
             redirect_uri=http://spilot.koding.com/signedRequest.php&
             fields=name,birthday,gender,location,email"
        scrolling="auto"
        frameborder="no"
        style="border:none"
        allowTransparency="true"
        width="100%"
        height="330">
 </iframe>

    </div>





</body>
</html>
于 2013-03-09T21:42:04.257 回答