Question

我目前正在Liferay 6.2中开发一个portlet。在portlet配置中，我存储了社交网络名称及其脚本（由不同的社交网络提供的脚本，如Facebook，Twitter等）。

当谈到公共portlet时，我有不同的选项卡，每个存储的社交网络一个（所以它们的数量是可变的）。当我最初加载portlet时，我没有显示Facebook页面插件的问题，但是当我开始更改标签时，出现了问题。我带了社交网络脚本（html +脚本标签）。

我知道如果你插入那些代码片段，脚本标签将不会被执行，所以我不会在portlet上加载插件，只有html。如果我eval（）脚本，Facebook脚本根本不起作用，并且它不会显示任何错误。如果我用我自己的代码改变Facebook脚本标签然后eval（）它，它可以工作，但如果我留在Facebook的代码，没有任何反应。

A.io.request(portletURL.toString(),{
            on: {
              success: function() {
                var data = this.get('responseData');
                var cont = document.getElementById('contenedor-script');
                document.getElementById('contenedor-script').innerHTML = data;
                var arr = document.getElementById('contenedor-script').getElementsByTagName('script')
                for (var n = 0; n < arr.length; n++){
                    console.log(arr[n].innerHTML);
                    eval(arr[n].innerHTML) //this executes the script tag
                }
              }
            }
          });

现在出现了正在插入的脚本：

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


<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/www.oviedo.es/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/www.oviedo.es/">Facebook</a></blockquote></div>

当没有评估该函数时，正在显示html标记。

我的另一种方法是在开始时加载所有标签并开始显示并用CSS隐藏它们，但这是一个更糟糕的主意。

感谢。

Answer 1

您需要使用FB.XFBML.parse()：https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

再次解析插件

在浏览器中呈现元素后立即调用该函数，JavaScript SDK将解析/显示它们。

顺便说一句，你当然应该只加载一次JS SDK。永远不要使用“eval”...

执行动态添加的社交网络小部件

1 个答案: