Do the "Save to Drive" buttons require manual cleaning?

Question

Do the "Save to Drive" buttons require manual cleaning?

Utilizing the Google Drive API for JavaScript within a VueJS application can be done as follows:

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

Within a component:

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

The "Save to Drive" buttons are displayed correctly, but upon navigating away from the component (when the HTML element is removed from the DOM), multiple exceptions are thrown in the console:

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

Am I overlooking something? Is there another step I need to follow when destroying the view?

Please note that the file path for the button is on the same server and specified as relative, so CORS is not an issue for downloading the file. Everything works fine except for the JavaScript errors being triggered.

javascript vue.js google-api google-drive-api

Answer 1

Answer №1

When a user clicks the "Save to Drive" button, two elements are added to the page and will persist even after navigating away. To address this issue, it is important to manually delete these elements before leaving the current route.

https://i.sstatic.net/uG5bf.png

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();
  }
},

Answer 2

When a user clicks the "Save to Drive" button, two elements are added to the page and will persist even after navigating away. To address this issue, it is important to manually delete these elements before leaving the current route.

https://i.sstatic.net/uG5bf.png

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();
  }
},

Answer 3

Answer №2

One solution is to clear out your HTML content using the following code snippet. This will remove any iframes present, but remember to reload new content afterwards.

let rootNode = document;
while (rootNode.hasChildNodes()) {
    rootNode.removeChild(rootNode.lastChild);
}

Answer 4

One solution is to clear out your HTML content using the following code snippet. This will remove any iframes present, but remember to reload new content afterwards.

let rootNode = document;
while (rootNode.hasChildNodes()) {
    rootNode.removeChild(rootNode.lastChild);
}

Do the "Save to Drive" buttons require manual cleaning?

Answer №1

Answer №2

Similar questions

attempting to fulfil a promise through a resolution

Tips on retrieving the URL of a background image using "$event.target" to display in an Ionic modal

Automatically collapse the responsive menu upon selecting a menu item

Looking to iterate through MongoDB using a promise and a forEach loop? I'm aiming to populate an array

Every time I attempt to load the table, I encounter an error

`Is there a way to modify the zAxis of a Paper component in Material-UI?`

Searching for an Angular 7 alternative to Vue.js's "nextTick" function

Initiating and pausing an Interval using a single button

How to access the parent array element in a nested ng-repeat in AngularJS

Can you tell me the maximum length allowed for the 'key' attribute in Vue.js when rendering a list item?

Issue with jQuery fadeIn() and fadeOut() functions on IE versions 7 and 8

Vue ESLint error: Missing space before function parentheses issue

What is the best way to only load a specific div from another webpage onto my own webpage without loading the entire page?

How can one use jQuery to target elements that have names that are in an array format?

refresh PHP automatically using JavaScript

Send form information using the REST method

What is the best way to access the attributes of a particular object following a triggered event?

How do I customize the rounding and color of selected dates in Vue Tailwind Datapicker?

After integrating Redux into React, the map(item) function is unable to send "item" as props to a JSX component

How can I combine multiple textures from mtlLoader and objLoader in three.js?