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

移動コードを作成します。それ以外の場合は、fbが準備完了であることをアプリに通知するためにイベントを使用します。 – vbranden

よう

I負荷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を確認してください。

は、プラグインをあなたのvuejsアプリに 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をロードするのを待ちます

答えて

関連する問題