Facebook的JS客户端端身份验证不工作在IE

问题描述:

我试图让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> 

任何人都可以告诉我,我可能做错了什么? 谢谢!

首先:什么让你觉得有两个<html>元素在你的页面会有好处...?删除第一个,这是无稽之谈。

在IE 8中,当我单击登录按钮时根本没有任何反应。

IE < 9不支持addEventListener将事件处理程序绑定到DOM元素。所以,除非你还嵌入了一些库,将这个功能添加到较旧的IE中(我什么​​也没有看到),你的代码不能这样工作......并且实际上应该在JS控制台中抛出一个错误。 (你甚至懒得去那里看看吗?)

+0

CBroe - 我很感激帮助,我现在正在工作。回答你关于JS控制台的问题 - 不,我没有打扰;我不用JS做很多工作,不知道从哪里开始。 – dscl

+0

我搜索了互联网寻找这个答案只是发现'addEventListener'是IE 7/8的问题....感谢您保存我的理智 – martincarlin87