0

我想达到什么目的。要创建一个加载 Facebook Javascript SDK 的模块，而不必将该脚本标记粘贴到您的 HTML 中并手动输入您的应用程序详细信息，是的，这似乎是在浪费时间，但对我来说似乎更有意义。例如，此模块将使用您的详细信息进行配置，并且可以通过 Javascript 设置所有内容，而不是将初始化代码放在 HTML 文件中，将其余逻辑放在脚本文件中。

我的问题。当我动态附加脚本和

<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

我不确定实际出了什么问题，但是您的间接级别比您需要的要多，这使整个事情变得太复杂了。为什么不这样：

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。

于 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 回答