时间戳

首页 > 解决方案 > Turbolinks 5 - 拆除第 3 方小部件（异步）

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

问题描述

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

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

笔记：

标签： google-tag-managerturbolinks

解决方案

我检查了小部件是否仍在初始化，然后我将使用下面的 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'));

推荐阅读