javascript - 动态脚本加载 Zendesk 小部件

Question

我一直在尝试通过不加载 Zendesk Widget 来节省页面资源，除非需要。

如果我手动将以下标签添加到页面，一切正常:

<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=[MyKey]> </script>

作为我页面的一部分，我在某处始终存在一个 div 标签:

<div id="ze-snippet"> </div>

我想要的是，对 <script> 执行“动态脚本加载”当用户点击按钮时标记。

我目前的尝试是这样的:

window.onload = function () {
  var zendeskWidgetOn = false;
  document.getElementById('enable-zendesk-widget').addEventListener('click', function( event ) {
    if (!zendeskWidgetOn) {
      zendeskWidgetOn=true;
      (function(d, script) {
        script = d.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.onload = function(){
          console.log('script finished loading ...');
        };
        script.src = 'https://static.zdassets.com/ekr/snippet.js?key=[my key]';
        d.getElementsByTagName('head')[0].appendChild(script);
      }(document));
    }
  }, false);
};

我不断遇到的错误，我终生无法弄清楚如何解决它:

Answer 1

要让小部件脚本仅在单击按钮时加载，您只需将其插入到您的 html 中:

<script>
  function loadZendeskWidget() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.id = 'ze-snippet';
      script.async = true;
      script.src = 'https://static.zdassets.com/ekr/snippet.js?key=<key>';
      document.getElementsByTagName('head')[0].appendChild(script);
  };
</script>

只需将“key”替换为您自己的小部件 key 即可。

希望这对您有所帮助。