使用JavaScript（jQuery）插入TrustPilot HTML无法显示的问题

嘿，我看你踩了两个常见的小坑，咱们一步步来搞定：

第一个坑：HTML字符串被转义成纯文本了 #

你写的trustPilotHtml()函数里用了<这类转义字符，这会导致插入到页面的是纯文本字符串，而不是浏览器能解析的HTML元素。直接把转义符换成正常的HTML标签就行：

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%' " + 
    // 把剩下的属性也改成正常格式，去掉&这类转义符
    "></div>";
  return str;
}

第二个坑：动态插入的元素没触发TrustPilot初始化 #

TrustPilot的widget脚本是在页面首次加载时运行的，它只会扫描当时存在的DOM元素。你用jQuery动态插入HTML后，脚本不会自动识别新元素，所以得手动触发初始化：

$(window).on('load', function () { 
  var el = $('#some-element'); 
  // 先插入正确的HTML
  el.html(trustPilotHtml()); 
  
  // 手动告诉TrustPilot渲染新插入的widget
  if (window.Trustpilot) {
    // 针对当前插入的这个widget元素单独初始化
    window.Trustpilot.loadFromElement(el.find('.trustpilot-widget')[0]);
    // 如果上面的方法没效果，试试重新初始化所有TrustPilot组件
    // window.Trustpilot.init();
  }
});

额外要注意的点 #

• 确保你页面里已经引入了TrustPilot的官方初始化脚本，而且要在你的jQuery代码之前加载，不然window.Trustpilot对象会找不到。
• 如果是在AJAX请求完成后动态插入的，也要在请求成功的回调里执行上面的初始化代码。

内容的提问来源于stack exchange，提问作者Sylar