vue.js框架的iframe页面计时器无法销毁的解决方法

发布时间 2023-08-15 20:52:31作者: 学以致用的人

同学试过使用生命周期等方式都不能清除计时器;因而改用这个方法;

1,首先vue页面上随便写个有高度的div如下:用refs获取高度

 <div class="hub-fixed-box" :style="{width:fixedWidth+'px' }" ref="fixedTop"></div>

2.定时器定义在data内

data:{

 timer:null ,// 计时器
}

3,初始化定时器,

this.$refs.fixedTop.offsetHeight>0时执行想要执行的方法,反之销毁即可;
mounted:function () {
             
                this.timer = setInterval(() => {
                    this.timerType=true;
                    if(this.$refs.fixedTop.offsetHeight>0){
                        this.save()
                    }else{
                        clearInterval(this.timer)
                        this.timer=null
                    }

                }, 6000)



            }

4.也试过使用ID获取元素是否为空,结果元素一直可以打印出来,离开页面也是可以打印出来的;就很坑,只能用上述方法;

其他的生命周期方法全试过,都没卵用;