纯前端js插件实现同一浏览器控制只允许打开一个标签，处理session变更问题

G_G#2026-01-11 17:04

功能介绍

该功能通过纯前端实现，确保在同一浏览器中仅允许打开一个特定页面的标签页，避免重复打开造成的资源浪费或数据冲突。适用于需要严格单实例运行的Web应用场景。

下载地址：

https://download.csdn.net/download/gshzh00/92552909

引入方式 1：全局变量配置

在引入 JS 插件之前定义全局变量

页面唯一标识（SINGLE_TAB_PAGE_TYPE）：可加入当前用户信息，如加入登陆人id，该页面同一浏览器打开两个标签页，登录新用户后，其他标签提示自动关闭。
页面关闭后跳转地址（SINGLE_TAB_REDIRECT_URL）：自定义其他标签页跳转地址
<script> // 页面类型唯一标识 window.SINGLE_TAB_PAGE_TYPE = 'pageA'+当前登陆人id; // 自定义跳转地址（支持相对路径/绝对路径） window.SINGLE_TAB_REDIRECT_URL = '/login'; // 示例：带参数的跳转地址 // window.SINGLE_TAB_REDIRECT_URL = '/error?code=403&msg=cross_page_conflict'; </script> <script src="single-tab-system.js"></script>

引入方式 2：DOM 隐藏域配置（适合后端渲染场景）

在 body 中添加隐藏域，通过 id="single-tab-redirect-url" 配置：

复制代码

<!-- 1. 配置页面类型隐藏域 -->
<input type="hidden" id="single-tab-page-type" value="pageB">

<!-- 2. 配置跳转地址隐藏域 -->
<input type="hidden" id="single-tab-redirect-url" value="/403">

<!-- 3. 引入JS插件 -->
<script src="single-tab-system.js"></script>

引入方式 3：JS 标签 data 属性配置

在引入 JS 的 script 标签上通过 data-redirect-url 属性配置：

复制代码

<!-- 1. 配置页面类型（全局变量方式） -->
<script>
  window.SINGLE_TAB_PAGE_TYPE = 'pageA';
</script>

<!-- 2. 引入JS插件，通过data属性配置跳转地址 -->
<script 
  src="single-tab-system.js" 
  data-single-tab="true" 
  data-redirect-url="/login"
></script>