如何防止同一个网站打开多个标签页？

Posted 2023-03-08

【中文标题】如何防止同一个网站打开多个标签页？

【英文标题】：How to prevent same website open multiple tab pages?

【发布时间】：2016-02-19 13:19:51

【问题描述】：

我有一个场景会阻止同一网站在浏览器的多个打开的标签页中出现。我的想法是当用户第一次从浏览器打开一个网站时，这很好，当用户产生新的标签页或外部链接再次打开同一个网站时，我们应该将它重定向到已经打开的网站。 我不知道如何实施。我可以提供一些线索吗？谢谢。

【问题讨论】：

“我们应该把它重定向到已经打开的那个”---这到底是什么意思？

github.com/tejacques/crosstab + window.focus()

同一网站不能打开多个标签页

你不能（也不应该）那样做。

用户可以随时使用其他浏览器或其他计算机打开网站的另一个视图。所以，基本上你永远无法阻止这种情况。您的网站应该能够处理查看相同状态的多个选项卡。

【参考方案1】：

也许使用本地存储。

Window.onload=function()

if(localStorage.getItem('windows')===1)

window.close();

else

localStorage.setItem("windows",1);




Window.onbeforeunload=function()
localStorage.setItem("windows",0);

【讨论】：

如果由于某种原因onbeforeunload 没有被触发 - 用户将永远无法打开网站？

localstorage 只提供给 html5，是吗？

而且，如果您的浏览器曾经崩溃或计算机突然关闭，因此 localStorage 项目未被清除，您将永远无法再次打开您的页面。不是一个好的故障模式。

只需通过 JS 设置/读取会话 cookie，而不是 localStorage

【参考方案2】：

我最近遇到了一个类似的问题，我必须防止多个窗口/选项卡在同一个 localStorage 上运行。

解决方案是使用StorageEvents：每当另一个（！）窗口更改与此窗口相同的 localStorage 时，每个窗口都会收到一个 StorageEvent。

因此，诀窍是为 localStorage 定义一个“虚拟”键，并让每个窗口向该键中写入一些随机值，以便让使用相同 localStorage 的所有其他窗口接收 StorageEvent：

  window.addEventListener('storage', () => 
    window.alert('another window or tab is working on the same localStorage')
  , false)

  localStorage.setItem('Sentinel',Math.random())