使用window.open方式打开多级子窗口,在子窗口关闭时,执行任意父级窗口中函数的解决方案

作者目前在项目中遇到一个需求,使用window.open方式打开A页面,A页面打开B页面,B页面打开C页面,C页面打开D页面,D页面打开E页面,在E页面关闭时执行以上任意页面中的函数;
第一种试验方法:使用window.opener.opener…这种方式不停的向上追,也是可以追寻到的,但是存在一个缺陷,已经打开的父级窗口不能关闭,一旦关闭,这种方式就不行了;
第二种试验方法:使用window.parent的方式也是比较依赖当前已经打开的父级窗口,作者并不知道用户会不会关闭某些窗口,或者关闭了几个,这种方式就会显得很呆;
第三种试验方法:使用句柄的形式,这种方法作者并没有做太多的试验,因为与其本身的某些逻辑调用产生了冲突,故而作者最后放弃了这种试验方法,感兴趣的可以试验一下;
第四种试验方法:已经解决作者的遇到的需求,在E页面关闭时使用window的localStorage属性,创建一个key/value键值对,在需要执行函数的页面比如A页面监听localStorage,获取在E页面设置的键值对进行判断,然后即可执行本页面的函数,具体代码如下:
E页面关闭页面时代码:

localStorage.clear();
localStorage.setItem('flag','1');

A页面监听代码:

window.addEventListener("storage",function(e){
        if(e.key === 'flag'){
            if(e.newValue == '1'){
              //处理业务逻辑
            }
        }
    })

复制即可使用,作者这此问题上有很多同事及朋友给予了很多帮助,在此感谢,着重感谢帮助我试验第四种试验方案的朋友,解决了我的问题,大佬牛批(破音~~);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值