Turbolinks 5 - 拆除第 3 方小部件（异步）

Question

我正在使用 FreshChat 小部件，但在执行缓存访问时丢失了它。问题是小部件的 destroy() 函数是异步的，因此当我在 'click' 或 'before-visit' 等任何事件上执行它时，小部件在缓存操作执行时仍然存在。所以我得到的是一个带有初始化小部件的缓存页面，这会破坏小部件并且我无法重新启动它。如果我在控制台中手动销毁它（在每次访问之前），那么一切都很好。

问题是 - 我如何才能确保在我进行访问后，在缓存当前页面之前销毁小部件？

备注：

小部件从 google 标签管理器执行，使用 dataLayer 自定义事件
'before-cache' 事件无济于事，因为它是异步操作。

Answer 1

找到解决办法了！

function beforeVisit( event ) {
  if (!window.turbolinksVisitFlag) {
    event.preventDefault();
    if (window.fcWidget ) {
    window.fcWidget.destroy();
  }
  window.turbolinksVisitFlag = true;
  setTimeout(function(){Turbolinks.visit(event.data.url);}, 500);
}

所以现在我拦截每次访问，做我的事情，并在超时后手动启动下一次访问。

Answer 2

我检查了小部件是否仍在初始化，然后我将使用下面的 flush_freshchat 方法销毁它并重新加载脚本以再次初始化 window.fcWidget

  function initFreshChat() {
    window.fcWidget.init({
      token: "<%= Settings::FRESHCHAT_TOKEN %>",
      host: "<%= Settings::FRESHCHAT_HOST %>"
  }); 

  function flush_freshchat(){
    delete window.fcWidget;
    delete window.history.pushState_fc_observer;
    delete window.history.replaceState_fc_observer;
    delete window.history.pushState;
    delete window.history.replaceState;
  }

(function(d, id) {
    var fcJS;
    freshchat_sdk = d.getElementById(id);
    if (freshchat_sdk) {
      freshchat_sdk.remove();
      if(window.fcWidget.isInitialized()){
        flush_freshchat();
      }
    }
    fcJS = d.createElement('script');
    fcJS.id = id;
    fcJS.async = true;
    fcJS.src = 'https://wchat.freshchat.com/js/widget.js';
    fcJS.onload = initFreshChat;
    d.head.appendChild(fcJS);
}(document, 'freshchat-js-sdk'));

Turbolinks 5 - 拆除第 3 方小部件（异步）

Turbolinks 5 - tearing down 3rd party widget (async)

google-tag-manager

turbolinks