"Save to Drive" buttons can/need to be cleaned up manually?

Question

Using https://developers.google.com/drive/api/v3/savetodrive#javascript_api In a VueJS app, like:

In index.html

<script type="text/javascript">
  window.___gcfg = {
    parsetags: 'explicit',
    lang: 'en-US'
  };
</script>
<script src='https://apis.google.com/js/platform.js' async defer></script>

In a component:

export default {
  mounted() {
    window.gapi.savetodrive.go(`savetodrive-${this.id}`);
  },
}

The "Save to drive" buttons are rendered correctly, but on navigating away from the component (when the HTML element gets removed from the DOM), I start getting a lot of exceptions in the console (one per each button x times rendered):

Uncaught DOMException: Blocked a frame with origin "https://drive.google.com" from accessing a cross-origin frame.
    at Object.nz [as kq] (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.xh-S9KbEGSE.O/m=gapi_iframes,gapi_iframes_style_common/rt=j/sv=1/d=1/ed=1/am=wQc/rs=AGLTcCNaUSRWzhd71dAsiMVOstVE3KcJZw/cb=gapi.loaded_0:150:257)
    at jz.send (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.xh-S9KbEGSE.O/m=gapi_iframes,gapi_iframes_style_common/rt=j/sv=1/d=1/ed=1/am=wQc/rs=AGLTcCNaUSRWzhd71dAsiMVOstVE3KcJZw/cb=gapi.loaded_0:148:261)
    at Fz (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.xh-S9KbEGSE.O/m=gapi_iframes,gapi_iframes_style_common/rt=j/sv=1/d=1/ed=1/am=wQc/rs=AGLTcCNaUSRWzhd71dAsiMVOstVE3KcJZw/cb=gapi.loaded_0:152:349)
    at https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.xh-S9KbEGSE.O/m=gapi_iframes,gapi_iframes_style_common/rt=j/sv=1/d=1/ed=1/am=wQc/rs=AGLTcCNaUSRWzhd71dAsiMVOstVE3KcJZw/cb=gapi.loaded_0:152:259

Is there something I'm missing? Something else I need to take care of when destroying the view?

Note that the filepath for the button is under the same server, the path is specified as relative, so there's no CORS involved for downloading the file, everything works ok, the only issue I have is the JS errors.

Answer 1

Each "Save to Drive" button will append 2 elements to the body which will remain after leaving the page. A solution would be to manually remove them before leaving the route.

beforeRouteLeave(to, from, next) {
  try {      
    // Remove all elements created by Save to Drive
    const insList = Array.from(document.querySelectorAll('ins'));
    for (let i = 0; i < insList.length; i += 1) {
      // Remove the iframe div
      insList[i].previousSibling.remove();
      // Remove ins element
      insList[i].remove();
    }
  } finally {
    next();
  }
},