1

Facebook Javascript SDKクライアント側認証を機能させようとしていますが、Firefoxで機能しますが、IEでは無残に失敗します。IE 8では、ログインボタンをクリックしても何も起こりません。オーバーレイも、IEからのアラートも、何もありません。このコードは、Facebookが提供するサンプルコードであり、変更はほとんどありません。

<!DOCTYPE html>
<html>
  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
    <title>Facebook Client-side Authentication Example</title>
  </head>
  <body>
    <div id="fb-root"></div>
    <script>
      // 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));

      // Init the SDK upon load
      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'xxxxxxxxxxxxxxx', // App ID
          channelUrl : '//thejspot.ws/channel.html', // Path to your Channel File
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true  // parse XFBML
        });

        // listen for and handle auth.statusChange events
        FB.Event.subscribe('auth.statusChange', function(response) {
          if (response.authResponse) {
            // user has auth'd your app and is logged into Facebook
            FB.api('/me', function(me){
              if (me.name) {
                document.getElementById('auth-displayname').innerHTML = me.name;
                oFormObject = document.forms['ri_form'];
                oFormObject.elements['full_name'].value = me.name;
                oFormObject.elements['email_address_'].value = me.email;
                oFormObject.elements['gender'].value = me.gender;
                oFormObject.elements['locale'].value = me.locale;
              }
            })
            document.getElementById('auth-loggedout').style.display = 'none';
            document.getElementById('auth-loggedin').style.display = 'block';
          } else {
            // user has not auth'd your app, or is not logged into Facebook
            document.getElementById('auth-loggedout').style.display = 'block';
            document.getElementById('auth-loggedin').style.display = 'none';
          }
        });

        // respond to clicks on the login and logout links
        document.getElementById('auth-loginlink').addEventListener('click', function(){
          FB.login(function(response) {}, {scope: 'email'});
        });
        document.getElementById('auth-logoutlink').addEventListener('click', function(){
          FB.logout();
        }); 
      }
    </script>
    <h1>Facebook Client-side Authentication Example</h1>
      <div id="auth-status">
        <div id="auth-loggedout">
          <a href="#" id="auth-loginlink">Login</a>
        </div>
        <div id="auth-loggedin" style="display:none">
          <span id="auth-displayname"></span> (<a href="#" id="auth-logoutlink">logout</a>)<br /><br />
          <h3>Facebook Attributes</h3>
      </div>
    </div>
    <form action="" method="get" id="ri_form">
              Full Name: <input name="full_name" type="text"><br />
              Email: <input name="email_address_" type="text"><br />
              Gender: <input name="gender" type="text"><br />
              Locale: <input name="locale" type="text"><br />
          </form>
  </body>
</html>

誰かが私が間違っているかもしれないことについて私を手がかりにすることができますか？ありがとう！

4

1 に答える 1

1

まず第一に：あなたのページに2つの <html>要素があることが有益だと思う理由は何ですか…？最初のものを削除してください、それはナンセンスです。

IE 8では、ログインボタンをクリックしても何も起こりません。

addEventListenerIE <9は、イベントハンドラーをDOM要素にバインドすることをサポートしていません。したがって、この機能を古いIEに追加するライブラリも埋め込んでいない限り（私は何も表示していません）、コードはこのように機能しません…そして実際にはJSコンソールでエラーをスローするはずです。（あそこを見るのも面倒でしたか？）

于 2012-09-12T16:44:51.267 に答える