2012-09-12 112 views
1

我試圖讓Facebook JavaScript SDK客戶端身份驗證工作,它在Firefox中這樣做,但它在IE中失敗。在IE 8中,當我單擊登錄按鈕時,什麼也沒有發生。沒有重疊,沒有來自IE的警報,沒有任何東西。該代碼是由Facebook提供的樣例代碼,修改方式非常少。Facebook的JS客戶端端身份驗證不工作在IE

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

任何人都可以告訴我,我可能做錯了什麼? 謝謝!

回答

1

首先:什麼讓你覺得有兩個<html>元素在你的頁面會有好處...?刪除第一個,這是無稽之談。

在IE 8中,當我單擊登錄按鈕時根本沒有任何反應。

IE < 9不支持addEventListener將事件處理程序綁定到DOM元素。所以,除非你還嵌入了一些庫,將這個功能添加到較舊的IE中(我什麼​​也沒有看到),你的代碼不能這樣工作......並且實際上應該在JS控制檯中拋出一個錯誤。 (你甚至懶得去那裏看看嗎?)

+0

CBroe - 我很感激幫助,我現在正在工作。回答你關於JS控制檯的問題 - 不,我沒有打擾;我不用JS做很多工作,不知道從哪裏開始。 – dscl

+0

我搜索了互聯網尋找這個答案只是發現'addEventListener'是IE 7/8的問題....感謝您保存我的理智 – martincarlin87