如何删除Stripe的iframe？

Question

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

在将其卸载到组件的var list = new List<ModelName>(); list = ctx.MemberTable .Where(c => c.sex==Sex) .Where(c => c.membercode==true) .ToList(); 挂钩中并删除添加的iframe后：

destroyed

由Stripe添加的iframe：

过一会儿（其中一个）再次出现：

像这样的iframe似乎是由Stripe的侦听器重新创建的，这些侦听器在发生消息事件时已附加到窗口对象。我无法删除此侦听器，因为处理函数位于iframe内的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);
        }));
},

Answer 1

您可以使用setTimeout(destroyed, 1000)

Answer 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>