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.

javascriptvue.jsgoogle-apigoogle-drive-api

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.

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sharing data between sibling components in Vue.js 3 single file componentsIs this fine

I've been struggling to pass a prop between sibling elements - a card and an input. So far, I haven't had any success. Within a card element, I have a button nested. When the button is clicked, I emit the ID of the card to the button element. I ...

vue.jsvuejs3vue-script-setupvue-sfc

Obtaining the source code from a different domain website with the help of jQuery

Is there a way to extract part of the source code from a YouTube page without using server-side programming? I've tried cross-domain AJAX techniques like Yahoo YQL and JsonP. While Yahoo YQL allows me to grab part of the source code, I'm facing ...

javascriptjqueryhtmlajaxcross-domain

Use `$$state: {…}` within the request rather than the data

When attempting to send a request with data, I am only getting "f {$$state: {…}}" in the console. $scope.createTask = function () { var req = $http.post('api/insert', { title: $scope.newTitle, description: ...

javascriptnode.jsangularhttppost

Turn off Chrome Autofill feature when placeholders are being used in forms

I am encountering difficulties with Google autofill for fields that have placeholders. Despite attempting various solutions provided at: Disabling Chrome Autofill, none of them seem to work as needed. The challenge is to create a form with different field ...

javascripthtmlcssgoogle-chromeautofill

Tips for swapping out a sticky element as you scroll

Context As I work on developing a blog website, I aim to integrate a sticky element that dynamically updates according to the current year and month as users scroll through the content. This would provide a visual indication of the timeline for the listed ...

javascriptcssstickyintersection-observerhtml-heading

Polymer: Basic data binding is not functional in the second element

After dedicating 6 hours to this problem, I still can't seem to find a solution. Below is the code snippet from index.html: <flat-data-array availableModes="{{modes}}" id="dataArray"></flat-data-array> <flat-strip-view availableModes=" ...

javascripthtmldompolymerpolymer-1.0

The debounced function in a React component not triggering as expected

I am facing an issue with the following React component. Even though the raiseCriteriaChange method is being called, it seems that the line this.props.onCriteriaChange(this.state.criteria) is never reached. Do you have any insights into why this.props.onC ...

javascriptreactjstypescriptlodashes6-class

React JS routes function properly only upon being reloaded

Encountering a problem with my reactJS routes where the URL changes in the address bar when clicking on a link, but the component does not render unless I refresh the page. Here is an excerpt from my code: index.js import React, { Component } from &apos ...

javascriptreactjs

What is the best way to convert minutes into both hours and seconds using javascript?

In order to achieve this functionality, I am trying to implement a pop-up text box where the user can choose either h for hours or s for seconds. Once they make their selection, another pop-up will display the answer. However, I am facing issues with gett ...

javascripthtml

Error: Client was unable to process JSON data

My server setup looks like this: var http = require('http'); //Defining the port to listen to const PORT=8092; //Function that handles requests and sends responses function handleRequest(request, response){ response.statusCode = 200; ...

javascriptjsonnode.jssocket.io

Retrieve the parent node and its corresponding children nodes using Vuetify's Tree-view component

Whenever I attempt to choose a node in the Vuetify tree-view while in leaf mode, only the leaf nodes are showing up in the v-model. Is there a way to include all the child nodes along with the selected parent node? Vuetify Version: 2.2.18 Link to the cod ...

vue.jsvuetify.js

Strategies for managing events within functional React components without relying on mutative operations

Based on insights from Cam Jackson, the recommendation is to utilize Redux and create small, stateless functional components. For example: const ListView = ({items}) => ( <ul> {items.map(item => <ItemView item={item}/>)} ...

javascriptreactjsreduxjsx

Arranging multiple Label and Input fields in HTML/CSS: How to create a clean and

I'm struggling with HTML and CSS, trying to figure out how to align multiple elements on a page. I've managed to line up all the rows on the page, but for some reason, the labels are appearing above the input fields when I want them to appear be ...

javascriptjqueryhtmlcss

Tips for disentangling code from types in Typescript

Instead of intertwining code and types like the example below: const compar8 : boolean | error = (action: string, n: number) => { switch(action) { case 'greater': return n > 8; case 'less': ...

javascripttypescripttypestypescript-typingstranspiler

What is the best way to choose just one value from an option that includes two variables?

I have a list of properties with numbers and names displayed in my form options. <b-col md="3"> <b-form-group :label="$t('departmentNumber')"> <b-form-select vuelidate v-model="$v.consumptionCon ...

vue.jsbootstrap-4html-selectbootstrap-vue

Linking the value of an expression to ngModel

There is a specific scenario where I need the ng-model property to bind to a value retrieved from the database as part of the business logic. To illustrate this concept, I have set up an example function TodoCtrl($scope) { $scope.field1 = "PropertyFr ...

javascriptangularjsangularjs-scopeangularjs-ng-model

jQuery will envelop the HTML elements in an inconsequential div

Imagine a website that is visually complex, with various styles and images positioned in different ways. What if we wanted to add a small overlay icon above each image? At first, the solution might seem simple - just use absolute positioning for a span el ...

javascriptjquerycssdomjquery-wrap

Validation of object with incorrect child fields using Typeguard

This code snippet validates the 'Discharge' object by checking if it contains the correct children fields. interface DischargeEntry { date: string; criteria: string; } const isDischargeEntry = (discharge:unknown): discharge is DischargeEntry ...

javascripttypescripttypestypeguards

The jQuery fadeOut function modifies or erases the window hash

While troubleshooting my website, I discovered the following: /* SOME my-web.com/index/#hash HERE... */ me.slides.eq(me.curID).fadeOut(me.options.fade.interval, me.options.fade.easing, function(){ /* HERE HASH IS CLEARED: my-web.com/index/# * ...

javascriptjquerywindowshashfadeout

I encountered a SyntaxError that reads "Unexpected token instanceof" while using the Chrome Javascript console

I find it quite surprising that the code below, when entered into the Chrome JavaScript console: {} instanceof Object leads to the error message displayed below: Uncaught SyntaxError: Unexpected token instanceof Could someone kindly explain why this ...

javascriptgoogle-chrome-devtools