vue2+window.open()开发的问题及解决记录

目录

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、火狐。其他内核/或涉及到不同浏览器的版本需自行尝试。

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