js 浏览器窗口只能开启一个，多开则关闭新开的窗口

xuelong-ming

于 2024-04-28 18:24:32 发布

阅读量932

点赞数 9

文章标签： javascript

本文链接：https://blog.csdn.net/xuelong5201314/article/details/138283997

版权

本文介绍了一个在Vue2项目中，为避免多开浏览器窗口导致数据统计异常，通过sysend.js实现检测并限制同一应用内只能打开一个窗口，当发现多个标签页时自动关闭或重定向至静态界面的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

vue2项目，业务需求不能多开浏览器窗口，多开会导致数据统计异常，要求多开时跳转指定静态界面。

思路

有没有一种方法可以检测同一应用程序是否打开了多个浏览器选项卡。

解决方法

sysend.js 提供了跨浏览器tabs 数据同步的能力，利用了不少浏览器的特性 (localstoreage api 以及broadcastchannel api)
打开多个页签我们就能看到效果（注意无痕模式是不支持的，机制以及数据共享的问题）

代码

安装sysend

npm install sysend

或者CDN

https://unpkg.com/sysend

<script>
import sysend from 'sysend'
export default {
  created() {
    sysend.track('ready', () => {
      sysend.list().then(tabs => {
        if (tabs.length > 0) {
            window.close()
            // window.location.href = '../index.html'
            window.location.href = 'about:blank'
        }
      })
    })
  }
}
</script>