如何实现点击元素时判断tags.php标签页状态并跳转或新建？

问题背景 #

现有代码：

$('#cptagswrap').click(function() { window.open('tags.php'); });

可以实现点击#cptagswrap元素时打开新标签页加载tags.php，但现在需要优化逻辑：先检查tags.php是否已在标签页中打开，若已打开则切换至该标签页，若未打开则新建标签页。

解决方案 #

由于浏览器的安全限制，我们无法直接遍历所有已打开的标签页去查找tags.php，但可以通过保存第一次打开标签页的引用，来追踪它的状态。具体实现步骤如下：

1. 声明合适作用域的变量保存标签页引用
   首先在事件处理函数外声明一个变量，用来存储打开的tags.php标签页对象（建议放在全局或封装在闭包里，避免污染全局空间）：

   let tagsTab = null;
   

2. 修改点击事件处理逻辑
   在点击事件中检查标签页的状态，决定是切换过去还是新建标签页：

   $('#cptagswrap').click(function() {
     // 检查标签页是否存在且未被用户关闭
     if (tagsTab && !tagsTab.closed) {
       // 切换到已打开的标签页
       tagsTab.focus();
     } else {
       // 新建标签页并保存引用
       tagsTab = window.open('tags.php', '_blank');
     }
   });
   

注意事项 #

• 这个方案只能追踪通过当前页面的点击事件打开的tags.php标签页，如果用户通过其他方式（比如手动输入地址、书签等）打开了tags.php，代码无法识别到这个标签页。
• 如果用户手动关闭了该标签页，tagsTab.closed会变为true，下次点击时会自动新建一个新的标签页。

内容的提问来源于stack exchange，提问作者user7461846