0

我正在开发一个项目，您可以查看来自 Facebook、Twitter、Pinterest 等的多个嵌入代码。我通过 ajax 加载嵌入代码。但是我遇到了 facebook 嵌入代码的问题。Facebook 有一个非常混乱的嵌入系统。一个常规的嵌入代码由两部分组成；脚本部分和嵌入部分。

脚本部分

<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/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

嵌入部分

<div class="fb-post" data-href="https://www.facebook.com/photo.php?fbid=667590506599208&amp;set=a.155534741138123.32906.153667584658172&amp;type=1" data-width="550">
<div class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/photo.php?fbid=667590506599208&amp;set=a.155534741138123.32906.153667584658172&amp;type=1">Post</a> by <a href="https://www.facebook.com/cumhuriyetgzt">Cumhuriyet Gazetesi</a>.
</div>
</div>

我在头部标签之间包含了脚本部分。正如我所说，我通过 ajax 加载嵌入代码，当我这样做时，我也加载了这个

<script type="text/javascript"> FB.XFBML.parse(); </script>

代码以便 facebook 嵌入可以重新解析。我的问题是；在页面加载 facebook 嵌入代码不起作用（即使它们加载了 ajax）。当我重新加载嵌入代码（触发 ajax 加载的重新加载按钮）时，它们就会起作用。有时，当同一页面上有 twitter 或 pinterest 嵌入代码时，它们不起作用。

任何人都知道会发生什么？我应该在哪里以及如何包含脚本和重新解析代码？

谢谢

编辑：我认为问题可能与加载顺序有关。因此，如果在加载 DOM 元素之后加载脚本，则不会影响嵌入代码。也许如果我确保在加载页面之前加载脚本，它将起作用。只是一个想法...

4

1 回答 1

0

在您的 javascript 文件中的任何位置添加下面的 FB javascript。

(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/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));

接着

window.fbAsyncInit = function() {

            FB.XFBML.parse();
          }

加载 FB 嵌入内容后 2 或 3 秒调用上述函数。

setTimeout(function() {
    if (typeof(FB) != 'undefined') {

       window.fbAsyncInit();

        } 
       }, 2000)
于 2014-03-21T09:12:41.617 回答