Vuejs組件等待facebook sdk加載

我有一個組件顯示用戶從facebook登錄按鈕或用戶名。取決於他是否登錄。Vuejs組件等待facebook sdk加載

現在，在這個部分我用的是

created

事件，所以我會immidiatly檢查登錄。代碼在一個簡短的創建：

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

的錯誤是，它說，FB沒有定義，和肯定他是對的，FB是尚未加載。

這樣

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

來源

2016-08-15 Tzook Bar Noy

移動代碼到您的vuejs應用。否則，使用一些事件來通知您的應用程序fb已準備就緒。 – vbranden

我負載的Facebook，我永遠尋找一個答案。

Thanx to vbranden的評論我能夠得到它爲我工作。

你必須做的是在創建的方法中初始化facebook sdk。然後從fbAsyncInit函數中調用登錄名。

下面是我工作：

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

來源

2016-09-17 12:03:18 aljaydavids

此問題的一個通過創建一個vuejs插件來解決。

請檢查nuxt.js中的related answer。

創建一個插件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' 
})

來源

2017-07-05 17:20:09 ChaoTangChang

Vuejs組件等待facebook sdk加載

回答

相關問題