Vuejs 组件等待 facebook sdk 加载 [英] Vuejs component wait for facebook sdk to load
问题描述
我有一个组件可以显示来自 Facebook 的用户的登录按钮或用户名.取决于他是否登录.
I have a component that show a login button or username of the user from facebook. depends if he is logged in or not.
现在在这个组件中我使用
Now in this component I use the
created
事件，所以我会立即检查登录.代码在一个简短的创建:
event so I'll check the login immidiatly. code in created in a brief:
FB.getLoginStatus(function(response) {
//more things.....
错误是它说FB没有定义，确定他是对的，FB 还没有加载.
the error is that it says that FB is not defined, and sure he is right, FB is not loaded yet.
我像这样加载facebook
I load facebook like this
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1111111111',
xfbml : true,
version : 'v2.7'
});
};
(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/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
推荐答案
我一直在寻找这个问题的答案.
I was searching forever for a answer to this.
感谢 vbranden 的评论，我能够让它为我工作.
Thanx to vbranden's comment I was able to get it working for me.
您需要做的是在 created 方法中初始化 facebook sdk.然后从 fbAsyncInit 函数内部调用登录.
What you have to do is initialise the facebook sdk in the created method. Then call the login from inside the fbAsyncInit function.
这对我有用:
<body>
<div id="test"></div>
<script>
new Vue({
el: '#test',
created: function() {
console.log('created main');
window.fbAsyncInit = function() {
FB.init({
appId : '1111111111',
xfbml : true,
version : 'v2.7'
});
//This function should be here, inside window.fbAsyncInit
FB.getLoginStatus(function(response) {
console.log(response);
});
};
(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/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
});
</script>
</body>
这篇关于Vuejs 组件等待 facebook sdk 加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
