0

私は何を達成しようとしていますか。スクリプト タグを HTML に貼り付けたり、アプリの詳細を手動で入力したりせずに Facebook Javascript SDK を読み込むモジュールを作成するには、時間の無駄に思えるかもしれませんが、私には理にかなっているように思えます。たとえば、このモジュールは詳細を含む構成を取り、HTML ファイルにある初期化コードとスクリプト ファイルにある残りのロジックの代わりに、Javascript を介してすべてを設定できます。

私の問題。スクリプトを動的に追加すると、

<div id="fb-root"></div>

エラーが発生する

FB.init は既に呼び出されています - これは問題を示している可能性があります

インスタンス FB.init が呼び出されるのは一度だけなので、これは奇妙に思えます。事実上、私のスクリプトは、手動でスクリプト タグを html に追加する場合と同じですが、動的に実現しようとしています。

私が試したこと。ここで、javascript を使用して要素を追加および追加することに関する多くの質問を読みました。ほとんどすべての方法を試しました。Javascript を使用してスクリプトを動的に挿入するというタイトルのトピックを読みましたが、役に立ちませんでした。

私の方法は正しいようですが、それでもこれらの Facebook エラーが発生します。

私のマークアップ。

<!DOCTYPE html>
    <head>
       <title></title>
    <head>
    <body>
        <script src="facebook.js"></script>
    </body>
</html>

私のJavascript：

var Facebook = {};

Facebook = {
        config: {
        APP_ID: 'APP_ID',
        APP_URL: 'APP_URL',
        CHANNEL_URL: 'CHANNEL_URL'
    }

};

var fbEl = document.createElement('div');
fbEl.id = 'fb-root';
document.body.insertBefore(fbEl,document.body.children[0]);

var fbScript = document.createElement('script');
fbScript.type = 'text/javascript';
fbScript.innerHTML = '';
fbScript.innerHTML += 'window.fbAsyncInit = function() {\n';
fbScript.innerHTML +=   'FB.init({\n';
fbScript.innerHTML +=       'appId      : '+Facebook.APP_ID+',\n';
fbScript.innerHTML +=       'channelUrl : '+Facebook.CHANNEL_URL+',\n';
fbScript.innerHTML +=       'status     : false,\n';
fbScript.innerHTML +=       'cookie     : true,\n';
fbScript.innerHTML +=       'xfbml      : false \n';
fbScript.innerHTML +=   '});\n';

fbScript.innerHTML +=   '};\n';

fbScript.innerHTML +=   '(function(d, debug){\n';
fbScript.innerHTML +=   'var js, id = "facebook-jssdk", ref = d.getElementsByTagName("script")[0];\n';
fbScript.innerHTML +=   'if (d.getElementById(id)) {return;}\n';
fbScript.innerHTML +=   'js = d.createElement("script"); js.id = id; js.async = true;\n';
fbScript.innerHTML +=   'js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";\n';
fbScript.innerHTML +=   'ref.parentNode.insertBefore(js, ref);\n';
fbScript.innerHTML +=   '}(document, /*debug*/ false));';

document.body.insertBefore(fbScript,document.body.children[1]);

コードに Facebook 変数が正しく設定されていますが、これはデモンストレーション用です。これについてFacebookのドキュメントを何度も読みました。

Javascriptのみを使用してtje FB JS SKDのブロックを動的に追加する方法はありますか?

4

3 に答える 3

1

実際に何が問題なのかはわかりませんが、必要以上に間接化のレベルが 1 つ高く、全体が複雑になりすぎています。次のようなものではないのはなぜですか：

var Facebook = {
   config:{ //etc
   }
};

window.fbAsyncInit = function() {
  FB.init(//etc
  )
};

(function(d, debug){
  var js, id = //etc - this injects the SDK script reference into the dom.
})(document, false);
于 2013-02-27T22:40:04.907 に答える
0

FB が提供する非同期 JS コードは、JavaScript のみで FB SDK コードを生成する方法です。現在、PHPスタイルをJSにコーディングしようとしているようです...

モジュールを非同期的にロードする必要がある場合は、モジュール ローダー (RequireJS や YepNope など) を使用する必要があります。

トリガーされたエラー メッセージは、FB SDK URL にパラメータを追加したことが原因である可能性があります (例: //connect.facebook.net/fr_CA/all.js#xfbml=1&appId=123456789")。その場合は、 hash の後のすべてを削除して#ください。また、SDK を 2 回ロードしていないことを確認してください。

于 2013-02-27T22:36:17.160 に答える
0

私が試していた方法は、奇妙な読み込み順序を引き起こしていました。SDK が読み込まれる前に初期化コードが読み込まれ、奇妙なエラーが発生しました。

ロジックの改訂により、これが解決されました。それほど違いはありませんが、今では完全に機能します。

Facebook = {};

Facebook = {
    config: {
        APP_ID: 'APP_ID',
        APP_URL: 'APP_URL',
        CHANNEL_URL: 'CHANNEL_URL'
    }

};
Facebook.init = function() {
    var fbEl = document.createElement('div');
    fbEl.id = 'fb-root';
    document.body.insertBefore(fbEl,document.body.children[0]);
    window.fbAsyncInit = function() {
    // init the FB JS SDK
        FB.init({
            appId      : 'APP_ID', // App ID from the App Dashboard
            channelUrl : 'CHANNEL_URL', // Channel File for x-domain communication
            status     : true, // check the login status upon init?
            cookie     : true, // set sessions cookies to allow your server to access the session?
            xfbml      : true  // parse XFBML tags on this page?
        });

        // Additional initialization code such as adding Event Listeners goes here

    };

    // Load the SDK's source Asynchronously
    // Note that the debug version is being actively developed and might 
    // contain some type checks that are overly strict. 
    // Please report such bugs using the bugs tool.
    (function(d, debug){
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
        ref.parentNode.insertBefore(js, ref);
    }(document, /*debug*/ false));
};

Facebook.init();
于 2013-02-27T22:38:58.333 に答える