如何删除 Stripe 的 iframe？答案

【问题标题】：How to remove Stripe's iframes?如何删除 Stripe 的 iframe？
【发布时间】：2019-08-02 18:44:00
【问题描述】：

我在内部单页应用程序中使用带有 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 的侦听器重新创建的，这些侦听器在消息事件上附加到窗口对象。我无法删除此侦听器，因为处理程序函数位于 iframe 内的 iframe 中，因此浏览器不会让我访问其内部。

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

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

【问题讨论】：

标签： javascript vue.js iframe stripe-payments

【解决方案1】：

您可以使用setTimeout(destroyed, 1000)

【讨论】：

【解决方案2】：

您应该使用Stripe element's official destroy method，而不是手动从 DOM 中删除元素。它也应该清除所有 Stripe 侦听器。

有了这个库，你可以试试like this：

    <template>
     <div ref="card" />
    </template>
    
    <script>
    let stripe = window.Stripe('pk_test_xxxxxxxxxxxx'),
        elements = stripe.elements(),
        card = undefined;
    
    export default {
        name: 'Payment',
        mounted() {
          card = elements.create('card');
          card.mount(this.$refs.card);
        },
        beforeDestroy() {
          card.destroy(this.$refs.card);
        },
    }
    </script>

【讨论】：