时间戳

首页 > 解决方案 > 如何删除 Stripe 的 iframe？

javascript - 如何删除 Stripe 的 iframe？

问题描述

我在内部单页应用程序上使用带有 vue-stripe-elements-plus 的 Stripe Elements。由于在用户离开更改信用卡模块后不需要保持条带代码运行，我想完全卸载条带，但它似乎并不那么容易。

在我在组件的destroyed钩子中卸载它并删除添加的 iframe 后：

destroyed () {
        this.$unloadScript('https://js.stripe.com/v3/');
        //delete window.Stripe; // commented because this makes stripe add iframes twice

        let stripeIframes = [
            document.querySelectorAll('[name^=__privateStripeMetricsController]'),
            document.querySelectorAll('[name^=__privateStripeController]'),
        ];

        stripeIframes.forEach(iframes => iframes.forEach(iframe => {
             iframe.parentNode.removeChild(iframe);
        }));
},

Stripe 添加的 iframe：

在此处输入图像描述

一段时间后再次出现（其中之一）：

在此处输入图像描述

似乎这个 iframe 是由 Stripe 的侦听器重新创建的，这些侦听器在消息事件上附加到 window 对象。我无法删除此侦听器，因为处理程序函数位于 iframe 内部的 iframe 中，因此浏览器不会让我访问其内部。

此外，此侦听器正在发出不需要的条带化请求：

XHR finished loading: POST "https://m.stripe.com/4".

标签： javascriptvue.jsiframestripe-payments

解决方案

您可以使用setTimeout(destroyed, 1000)

推荐阅读