Javascript Vuejs组件等待facebook sdk加载_Javascript_Facebook_Vue.js

Javascript Vuejs组件等待facebook sdk加载

javascript facebook vue.js

Javascript Vuejs组件等待facebook sdk加载,javascript,facebook,vue.js,Javascript,Facebook,Vue.js,我有一个显示facebook用户登录按钮或用户名的组件。这取决于他是否登录现在在这个组件中，我使用 created 事件，因此我将立即检查登录名。在简要说明中创建的代码： FB.getLoginStatus(function(response) { //more things..... 错误是它说FB没有定义，当然他是对的，FB还没有加载我像这样加载facebook window.fbAsyninit=函数（）{ FB.init({ appId:'1111111'， xf

我有一个显示facebook用户登录按钮或用户名的组件。这取决于他是否登录

现在在这个组件中，我使用

created

事件，因此我将立即检查登录名。在简要说明中创建的代码：

FB.getLoginStatus(function(response) {
    //more things.....

错误是它说FB没有定义，当然他是对的，FB还没有加载

我像这样加载facebook


window.fbAsyninit=函数（）{
FB.init({
appId:'1111111'，
xfbml：是的，
版本：“v2.7”
});
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{return；}
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

我一直在寻找答案

根据vbranden的评论，我能够让它为我工作

您需要做的是在创建的方法中初始化facebook sdk。然后从fbAsyninit函数内部调用登录名

以下是对我有效的方法：

<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>


新Vue({
el:'测试'，
已创建：函数（）{
log（'created main'）；
window.fbAsyninit=函数（）{
FB.init({
appId:'1111111'，
xfbml：是的，
版本：“v2.7”
});
//此函数应位于此处的window.fbAsyninit内部
FB.getLoginStatus（函数（响应）{
控制台日志（响应）；
});
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{return；}
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
}
});

这个问题可以通过创建vuejs插件来解决

请在nuxt.js中检查该文件

创建一个插件

plugins/fb sdk.js

const vue_fb = {}
vue_fb.install = function install(Vue, options) {
    (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)
        console.log('setting fb sdk')
    }(document, 'script', 'facebook-jssdk'))

    window.fbAsyncInit = function onSDKInit() {
        FB.init(options)
        FB.AppEvents.logPageView()
        Vue.FB = FB
        window.dispatchEvent(new Event('fb-sdk-ready'))
    }
    Vue.FB = undefined
}

import Vue from 'vue'

Vue.use(vue_fb, {
    appId: 'your-app-id',
    autoLogAppEvents: true,
    xfbml: true,
    version: 'v2.9'
})

将代码移动到vuejs应用程序中。否则，请使用一些事件通知您的应用程序fb已就绪。我尝试了您的解决方案，但它仅在您创建组件时调用fb.getLoginStatus，之后它无法识别您是否正在尝试登录。它会为我抛出fb not defined错误，因此我使用了window.fb-