Removing external JS files when navigating to another page in VUEJS can be achieved by unloading the

Question

Removing external JS files when navigating to another page in VUEJS can be achieved by unloading the

I currently have a JavaScript component within the home component that utilizes an external script. My goal is to remove the external script when navigating to another page, without refreshing the page.

<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>

The link to the external script:

This setup allows me to maintain the Freshchat window on one specific page. While I can achieve this with conditions, it requires a page refresh. As the pages do not refresh, I am seeking a solution to dynamically remove the external script when navigating to other pages and reinstate it upon returning to this particular page.

javascript vue.js single-page-application

Answer 1

Answer №1

One way to handle the script is by encapsulating it within a Vue component life cycle,

render
remove
refresh

as needed.

Here's where I came across this code snippet on 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";
       });
     });
   }
 };
}
});

Answer 2

One way to handle the script is by encapsulating it within a Vue component life cycle,

render
remove
refresh

as needed.

Here's where I came across this code snippet on 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";
       });
     });
   }
 };
}
});

Removing external JS files when navigating to another page in VUEJS can be achieved by unloading the

Answer №1

Similar questions

Utilizing Angular.js to nest directives seamlessly without cluttering the markup

What is the best way to use Rails active storage and VueJS to directly upload files to S3?

Changing text and applying a different span class using a Jquery button toggle

Guide to automatically closing the calendar once a date has been chosen using owl-date-time

In Typescript, it is possible to assign properties to an object that are not explicitly defined in the object's type definition

Stop materializecss dropdown from closing when clicking within it

What is the best way to invoke a class method within a promise in Angular 2?

Troubleshooting: AngularJS not retrieving values from hidden input fields in ASP.NET MVC

Sending information to a personalized mat-grid element using properties

Is it necessary to sanitize strings before assigning them as the content of a textarea element?

Seeking assistance with transmitting data to the server and retrieving it for use. I am looking to achieve this goal utilizing JavaScript with Node.js

The chosen element contains a value of -1

ReactJS: Type error encountered - Unable to access property 'setState' as it is undefined

AngularJS: How to monitor variables without using $watch

Adjust the width of the dropdown menu for the v-combobox

How to align a div in the center of a cell with Bootstrap

Troublication inquiry for retrieving the latest messages to and from User A experiencing issues with functionality

Use Javascript's JQuery library to apply functionality to a newly inserted and cloned

The scrolling top value is dynamic when in developer mode

I'm completely clueless as to what the issue might be - could it possibly