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控制台中抛出一个错误。 (你甚至懒得去那里看看吗?)
CBroe - 我很感激帮助,我现在正在工作。回答你关于JS控制台的问题 - 不,我没有打扰;我不用JS做很多工作,不知道从哪里开始。 – dscl
我搜索了互联网寻找这个答案只是发现'addEventListener'是IE 7/8的问题....感谢您保存我的理智 – martincarlin87