Question

我几天前才开始使用Javascript，所以这个问题看起来很基本。我写了一些Javascript代码来与Facebook API进行交互。

目标是显示用户在通过Facebook登录按钮登录时管理的所有页面。

代码似乎正如它应该做的那样工作。

但是，控制台给出了错误“FB未定义”。

我已经阅读了有关此错误的所有其他问题，它似乎与SDK的异步加载相关联，但我似乎无法弄清楚这一点。

为什么我仍然会收到此错误？

******编辑07/07/2017 ******* 谷歌Chrome的控制台在这部分代码的FB.getLoginStatus行中给出了“FB未定义错误”：

function checkLoginStatus() {
    FB.getLoginStatus(function (response) {
        if (response.status === 'connected') {
            getPagesList();
        } else {
            document.getElementById('pageslist').style.display = 'none'; //Hides the div when people are not connected
            document.getElementById('pagestatistics').style.display = 'none'; //Hides the div when people are not connected
        }
    });
}

它还指向以下部分，这似乎是问题，因为当我从代码中删除它时，错误消失了：

//Here below, _5h0o is the class of the logout button
//This checks the login status AFTER the user clicks on logout thanks to setTimeout
    document.getElementsByClassName('_5h0o').onclick = setTimeout(function() {
        checkLoginStatus();
    }, 100);

以下是完整代码：

//Initialize Facebook SDK + Check Login Status
<div id="fb-root"></div>
	<script>		
		window.fbAsyncInit = function() {			
			FB.init({
			  appId      : 'xxxxxxxx',
			  xfbml      : true,
			  version    : 'v2.9'
			});
			
			checkLoginStatus();			
		};

		(function(d, s, id){
			 var js, fjs = d.getElementsByTagName(s)[0];
			 if (d.getElementById(id)) {return;}
			 js = d.createElement(s); js.id = id;
			 js.src = "//connect.facebook.net/fr_FR/sdk.js";
			 fjs.parentNode.insertBefore(js, fjs);
		}	(document, 'script', 'facebook-jssdk'));
	</script>


//Facebook Login Button

<div class="fb-login-button" data-scope="public_profile, read_insights, pages_show_list" data-width="300" data-max-rows="1" data-size="large" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false" onlogin="checkLoginStatusAfterLogin()" onclick="checkLoginStatus()"></div>		

<script>
	//Checks login status after people click on the Facebook button (useful for logout event)
	function checkLoginStatus() {
		FB.getLoginStatus(function (response) {
			if (response.status === 'connected') {
				getPagesList();
			} else {
				document.getElementById('pageslist').style.display = 'none'; //Hides the div when people are not connected
			}
		});
	}
	
	//Checks login status after people log in via the Facebook button
	function checkLoginStatusAfterLogin() {
		FB.getLoginStatus(function (response) {
			if (response.status === 'connected') {
				getPagesList();
				document.getElementById('pageslist').style.display = 'inline-block';
			} else {
				checkLoginStatus();
			}
		});
	}
	
	//Here below, _5h0o is the class of the logout button
	//This checks the login status AFTER the user clicks on logout thanks to setTimeout
	document.getElementsByClassName('_5h0o').onclick = setTimeout(function() {
		checkLoginStatus();
	}, 100);
</script>


//Display the pages (in the form of clickable spans) for which the user has reading rights


<div id="pageslist"></div>

<script>
	function getPagesList() {
		FB.api('/me/accounts', {fields:'id, name'}, function(response){	
			document.getElementById('pageslist').innerHTML = ''; //Makes sure the div is cleared before populating it with the list of pages
			for (i=0; i<response.data.length; i++){
				document.getElementById('pageslist').innerHTML += '<span class=\"pageslistspan '+response.data[i].id+'\" onclick="showStatistics(this.classList[1])">'+response.data[i].id+' '+response.data[i].name+'</span>'+'<br>';
					
			}		
		});
	}
</script>

Answer 1

尝试将getPagesList封装在文档中。

$(document).ready(function(){
     getPagesList(){
      ...
     }
  });

FB未定义，但Javascript代码运行顺利

1 个答案: