vue.js “保存至驱动器”按钮是否可以/需要手动清除？

mitkmikd 于 2023-02-05 发布在 Vue.js

关注(0)|答案(3)|浏览(131)

- bounty将在5天后过期**。回答此问题可获得+200声望奖励。Andy希望奖励现有答案。

在VueJS应用程序中使用www.example.com，例如：https://developers.google.com/drive/api/v3/savetodrive#javascript_api In a VueJS app, like:
输入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>

在组件中：

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

"Save to drive"按钮正确呈现，但在导航离开组件时（当HTML元素从DOM中删除时），我开始在控制台中收到许多异常（每个按钮一个，呈现x次）：

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

我是不是漏掉了什么？在破坏风景的时候我还需要注意什么？
请注意，按钮的文件路径位于同一服务器下，路径被指定为相对路径，因此下载文件时不涉及CORS，一切正常，唯一的问题是JS错误。

vue.js

来源：https://stackoverflow.com/questions/60113987/save-to-drive-buttons-can-need-to-be-cleaned-up-manually

3条答案

按热度按时间

2j4z5cfb1#

每个保存到驾驶按钮将附加2个元素到车身，这将在离开页面后保留。一个解决方案是在离开路线前手动删除它们。
"ins" elements to remove

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

希望这个有用。

赞(0）回复(0）举报 2023-02-05

qmb5sa222#

试着像这样清空你的html，它应该会去掉iframe，但是之后你将不得不在你的文档中加载一些内容。

var AnotherNode = document;
while (AnotherNode.hasChildNodes()) {
    AnotherNode.removeChild(AnotherNode.lastChild);
}

赞(0）回复(0）举报 2023-02-05

x8diyxa73#

你能否解释一下这句话，以便更好地理解-
离开组件时（从DOM中删除HTML元素时）
据我所知，如果你有你的应用程序运行在同一个起源（协议，主机名和端口），那么它不会导致任何错误。
根据帖子中提到的错误和谷歌搜索，我只是想知道同源政策，因为它是一个安全功能，保护用户数据跨越起源。
只是为了测试的目的，你能请禁用同源策略在您的浏览器. * 禁用同源策略是极其危险的，不应该尝试，除非你有信心你正在做什么.* 我只是说这样做只是为了找到根本原因.

想想看，如果你把我的谷歌文档加载到你网站的一个框架中，然后能够访问该页面的DOM，会发生什么。这将是一场安全灾难。

因为每个按钮都有一个iframe。所以基本上，我们不能使用JavaScript访问protocol，hostname和port。对于同源策略，浏览器会阻止脚本访问不同来源的帧。
变通解决方案**：**
您可以使用window.postMessage()方法，该方法安全地启用Windows对象之间的跨源通信;例如在页面和嵌入其中的内嵌框架之间。
postMessage(message, targetOrigin)

const frame = document.getElementById(`savetodrive-${this.id}`);
frame.contentWindow.postMessage(/*any variable or object here*/, targetOrigin);

赞(0）回复(0）举报 2023-02-05

我来回答

vue.js “保存至驱动器”按钮是否可以/需要手动清除？

3条答案

相关问题

热门标签

最新问答