Vuejs组件等待facebook sdk加载

本文介绍了Vuejs组件等待facebook sdk加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个组件，从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

事件，所以我会检查登录immidiatly。
代码创建简短：

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>

推荐答案

我是searchi

Thanx to vbranden的评论我能够为我工作。

Thanx to vbranden's comment I was able to get it working for me.

你要做的是在创建的方法中初始化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加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！