Question

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

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

时

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

我收到错误

FB.init has already been called - this could indicate a problem

这对我来说很奇怪，因为我只有一个实例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文档。

有没有办法使用ONLY Javascript为FB JS SKD动态添加块？

Answer 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);

Answer 2

异步JS代码FB提供了一种仅在javascript中生成FB SDK代码的方法。现在，您似乎尝试将PHP样式编写为JS ...

如果需要异步加载模块，则应使用模块加载器（RequireJS或YepNope等）。

触发的错误消息可能是因为您在FB SDK URL中添加了一些参数（例如//connect.facebook.net/fr_CA/all.js#xfbml=1&appId=123456789"）。如果是这样，只需删除哈希#之后的所有内容。另外，请确保您没有加载SDK两次。

Answer 3

我尝试的方法导致了一个奇怪的加载顺序，在加载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();

我可以使用带有动态脚本标签插入的Facebook Javascript SDK吗？

3 个答案: