目录

1、新开页签时,路由跳转的方式

2、新开页签监听浏览器关闭【×】和返回【←】的方式

3、页面内同时开启多个定时器,清空定时器不生效

4、Scripts may close only the windows that were opened by them


1、新开页签时,路由跳转的方式

(1)在A页面打开,新增B页签

此时A页面的vuex的所有数据B无法共享,需考虑在B内重新请求接口获取,或者A页面适时做本地缓存找到合适时机再清除。

const { href } = this.$router.resolve({
 // router-name 或用path
  name: 'ModuleEditing',
  // 要传的参数
  query: { }
})
window.open(href, '_blank')

(2)在已经打开新页签的基础上,在A页面内刷新为B页面

不要使用open+close的方式,因为有时当前页签会被关闭导致无法打开B页面。正确做法为使用vue-router去打开新页面:

this.$router.replace({
  name: 'SchemesDocument', // B页router-name
  query: {}
})

(3)在已经打开新页签的基础上,A页面数据更新后在本页面内刷新A-1 

vuex不会恢复为初始数据,需要在更新A-1成功前,将A的vuex数据恢复。至于页面内定时器及一些其他校验规则,估摸也是不会清除和刷新的,需手动恢复。

最开始我是使用【1-(2)】的方式,但忘记当时出了什么BUG(有点久远想不起来了),于是修改为路由重定向的方式去刷新当前页面,就没再出现问题。

A页面跳转自己的处理:

 // 刷新页面前,恢复必要的vuex和页面数据
 this.$store.commit('vuex')
 this.id = ''
 this.setTime = null
 window.clearInterval(this.setTime)
 this.$router.replace({
     path: '/aaa/bbb', //重定向的地址
     // 要传的参数
     query: {}
 })

 重定向页面的处理:

<script>
export default {
  name: 'Redirect',
  created() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render(h) {
    return h() 
  }
}
</script>

 router/index.js文件

{
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect') //重定向页面的储存路径
      }
    ]
  },

2、新开页签监听浏览器关闭【×】和返回【←】的方式

目前还没有找到更改拦截弹窗内容的方法,使用的浏览器默认文字和样式,“您即将离开页面”自定义文字暂不生效。

// 建立监听
mounted(){
  // 监听页面/浏览器关闭刷新
  window.addEventListener('beforeunload', this.handleBeforeUnload)
  // 兼容谷歌
  window.addEventListener('onbeforeunload', this.handleBeforeUnload)
},

// 关闭页面清除监听 (新开页签可以不关闭监听,页签关闭后事件就没了)
destroyed() {
  window.removeEventListener('onbeforeunload', this.handleBeforeUnload)
  window.removeEventListener('beforeunload', this.handleBeforeUnload)
},

// 监听浏览器刷新/关闭、页签关闭
handleBeforeUnload(event) {
  //离开前不满足直接关闭条件可做拦截处理(发布为移动端应用h5时不生效,仅适用pc)
  if ( false ) {
    // 更改时提示离开/刷新
    event.returnValue = '您即将离开页面'
    // 兼容火狐
    event.preventDefault()
  }
},

3、页面内同时开启多个定时器,清空定时器不生效

以前vue2开发没有一个页面同时开n个定时器的情况,所以不确定是新开页签导致的问题,还是vue本身对多定时器的clearInterval处理不生效。

// 当页面内有2个及以上的定时器时,不仅要清除定时器,还要对定时器赋值为null
window.clearInterval(this.setTime)
window.clearInterval(this.saveTime)
this.setTime = null
this.saveTime = null

4、Scripts may close only the windows that were opened by them

问题出现:复制粘贴的网址,页面内click删除时,无法关闭页面。

正常只需要使用window.close() 就可以关闭window.open() 打开的页签了,但如果是用户将新开的页签复制,然后:1)粘贴到其他浏览器;2)或者在同一个浏览器再开一个新的页签。1)不用管,因为有登录验证。但是2)因路由不是通过open的方式打开,因此也不能用close关闭。

在网上搜索了很多资料,各种方法都试过,要么就是处理麻烦还关不掉,要么虽然跳转至空白页,但是点击浏览器自带的返回时,仍然会回到已被删除数据的路由,这是不合理的。结果大佬尝试写的一行代码就解决了这个问题。(感谢团队大佬的帮助)

window.close()
// 一定要放在close后边
window.location.replace('about:blank', '_self', '').close()

一定要放在后边是因为,当时大佬将第二句话写在了close的前边,导致正常打开的页面也不能关闭,我就尝试将其放在close的后边,就生效了……

这样一来,正常打开的页面走第一句话,页面被关闭。如果是复制粘贴打开的网页,控制台对window.close() 只报警告不报错,因此代码还可以继续向下执行,页面会跳转至空白页,点击浏览器自带返回按钮,也不会回到被删除的页面了。(受浏览器限制,这是目前找到的最优解)。

已验证好用的PC浏览器:谷歌、edge,360、QQ、火狐。其他内核/或涉及到不同浏览器的版本需自行尝试。

当然,如果你害怕出现什么意外,也可以做判断处理。(重定向到新页面或者在关闭的时候加入判断都可以)

Logo

前往低代码交流专区

更多推荐