Как удалить внешний JS при переходе на другую страницу VUEJS - PullRequest
Новая
       99

Как удалить внешний JS при переходе на другую страницу VUEJS

0 голосов
/ 14 июля 2020

У меня есть компонент сценария java в домашнем компоненте с внешним js. Мне нужно удалить внешний js, когда страница переходит на другую страницу. Страница не обновляется sh. 

<script>
  function initFreshChat() {
    window.fcWidget.init({
      token: "***",
      host: "https://wchat.freshchat.com"
    });
  }
  function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);
</script>

Это внешний js: https://wchat.freshchat.com/js/widget.js

Мне это нужно, потому что мне нужно сохранить этот свежий чат окно на одной странице. Это можно сделать, поставив любое условие. Но это будет работать, если мы обновим sh страницу. Здесь страницы совсем не обновляются. Поэтому мне нужно удалить внешний js при переходе на другие страницы. И смонтируй обратно, когда зашел на эту страницу.

1 Ответ

0 голосов
/ 14 июля 2020

Вы можете обернуть скрипт в сторону Vue жизненного цикла компонента,

  • рендеринга
  • удаления
  • refre sh

, когда вам нужно.

Я нашел этот код на codepen https://codepen.io/akccakcctw/pen/LBKQZE

Vue.component("fc-button", {
template: "#fcButton",
props: {
 fc: {
   type: Object,
   default: {},
 }
 
},
methods: {
 openWidget: function() {
   document.getElementById("fc_frame").style.visibility = "visible";
   window.fcWidget.open();
 }
}
});

const vm = new Vue({
el: "#app",
data: function() {
 return {
   fc: {
     isInit: false,
   },
 };
},
mounted: function() {
 var self = this;
 window.fcSettings = {
   token: "8d3a4a04-5562-4f59-8f66-f84a269897a1",
   host: "https://wchat.freshchat.com",
   config: {
     cssNames: {
       widget: "custom_fc_frame",
       open: "custom_fc_open",
       expanded: "custom_fc_expanded"
     },
     headerProperty: {
       hideChatButton: true
     }
   },
   onInit: function() {
     
     window.fcWidget.on("widget:loaded", function() {
       self.fc.isInit = true;
       window.fcWidget.on("unreadCount:notify", function(resp) {
         console.log(resp);
         test = resp;
         if (resp.count > 0) {
           // document.getElementById('notify').classList.add('h-btn-notify');
           document.getElementById("notify").style.visibility = "visible";
         } else if (resp.count == 0) {
           // document.getElementById('notify').classList.remove('h-btn-notify');
           document.getElementById("notify").style.visibility = "hidden";
         }
       });
       window.fcWidget.on("widget:closed", function() {
         document.getElementById("fc_frame").style.visibility = "hidden";
         document.getElementById("open_fc_widget").style.visibility =
           "visible";
       });
       window.fcWidget.on("widget:opened", function(resp) {
         document.getElementById("open_fc_widget").style.visibility =
           "hidden";
       });
     });
   }
 };
}
});
...