动态 (ajax) 内容加载，Facebook 分享按钮消失

Question

所以在文中（文章）我有这个：

<div id="fb-root"></div>
<script>
    (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/hu_HU/sdk.js#xfbml=1&version=v2.5";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<div class="facebook_share_wrapper">
    <div class="fb-share-button"
         data-href="http://www...."
         data-layout="button">
    </div>
</div>

第一次，加载的很好！但是第二次，在 ajax 完成后：

setTimeout(function() {
    console.log(FB.XFBML.parse());
}, 3000);

如你所见，我给了额外的时间。但是 facebook 分享按钮不会出现！ FB.XFBML.parse解决了很多类似的问题，但我的没有...

Answer 1

我假设您也尝试动态加载 JS SDK，但如果您只是将它添加到 DOM（例如使用 innerHTML），则不会调用 JS。此外，您不初始化任何应用程序。

解决方法：

在页面加载时加载 JS SDK - 仅一次
使用 FB.init
在 AJAX 调用的回调中使用 FB.XFBML.parse()，在将共享按钮添加到 DOM

附加信息和如何加载 JS SDK 的示例：https://developers.facebook.com/docs/javascript/quickstart

重要提示：不要使用 setTimeout，那只是一个非常糟糕的解决方法。

动态 (ajax) 内容加载，Facebook 分享按钮消失

Dynamic (ajax) content loading, facebook share button disappears

ajax

facebook

facebook-javascript-sdk