插入TrustPilot时无法显示JavaScript HTML (jQuery)

Question

如果我将TrustPilot html代码直接添加到HTML页面上，它可以正常工作，但我需要将它与jQuery一起插入。当插入HTML代码时，我会看到它，但它没有显示。

  $(window).on('load', function () {
    var el = $('#some-element');

    el.html( trustPilotHtml() );

    function trustPilotHtml() {
      var str = "<div " +
        "class='trustpilot-widget' " +
        "data-locale='en-GB' " +
        "data-template-id='123456' "+
        "data-businessunit-id='123456' " +
        "data-style-height='500px' " +
        "data-style-width='100%' " +
        "data-theme='light' " +
        "data-stars='4,5' " +
        "data-schema-type='Organization'>" +
        "<a " +
        "href='https://some-url.com' target='_blank'>Trustpilot</a> " +
      "</div>";
      return $(str);
    }
});

让元素正确显示的唯一方法是不使用javascript直接插入HTML中吗？

Answer 1

不这不是唯一的办法。

您应该在HTML的头部分(或接近它)内部有一个引导脚本。此脚本负责初始化您在HTML中拥有的所有小部件(TrustBoxes使用Trustpilot语言)。

当然，如果您是动态地注入HTML，那么也可以自己调用window.Trustpilot.loadFromElement(trustbox); (如果需要的话)。

在这里，trustbox是一个HTMLElement，您可以通过使用document.getElementById("some-element")或类似的方法获得。

参考资料：https://support.trustpilot.com/hc/articles/115011421468

Answer 2

以下内容适用于产品列表页，该页面通过ajax返回筛选列表。

var element = document.getElementsByClassName("trustpilot-widget");
for(var i=0; i<element.length; i++) {
    window.Trustpilot.loadFromElement(element[i]);
}

在第一个页面加载时，所有产品评论都会按预期显示，但是如果通过ajax调用(例如使用过滤器)更新页面，则评审将丢失。在ajax之后运行上面的代码，重新加载评论