[解決済み] facebookのFB.initが完了したことを検出する方法
2022-09-16 09:26:37
質問
古いJS SDKには、FB.ensureInitという関数がありました。新しいSDKにはそのような関数がないようです。完全に開始されるまでapiコールを行わないようにするにはどうしたらよいでしょうか。
私はこれをすべてのページのトップに含めています。
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $conf['fb']['appid']; ?>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoResize();
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
どのように解決するのですか?
2012年1月4日更新
FB依存のメソッドを呼び出すだけではダメなようです(例えば
FB.getAuthResponse()
の直後で
FB.init()
として、前と同じように
FB.init()
は非同期であるように見えます。コードを
FB.getLoginStatus()
レスポンスにラップすることで、APIの準備が完全に整ったことを検出するトリックを行うことができるようです。
window.fbAsyncInit = function() {
FB.init({
//...
});
FB.getLoginStatus(function(response){
runFbInitCriticalCode();
});
};
を使用する場合、または
fbEnsureInit()
を実装している場合は、以下のようになります。
window.fbAsyncInit = function() {
FB.init({
//...
});
FB.getLoginStatus(function(response){
fbApiInit = true;
});
};
元記事です。
FBが初期化されたときにスクリプトを実行したい場合は、コールバック関数を
fbAsyncInit
:
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $conf['fb']['appid']; ?>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoResize();
runFbInitCriticalCode(); //function that contains FB init critical code
};
もしFB.ensureInitを完全に置き換えたいのであれば、公式の置き換えは存在しないので、自分で何か書かなければなりません(大きな間違いだと思いますが)。以下は私が使っているものです。
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $conf['fb']['appid']; ?>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoResize();
fbApiInit = true; //init flag
};
function fbEnsureInit(callback) {
if(!window.fbApiInit) {
setTimeout(function() {fbEnsureInit(callback);}, 50);
} else {
if(callback) {
callback();
}
}
}
使用方法
fbEnsureInit(function() {
console.log("this will be run once FB is initialized");
});
関連
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?