检查我的网站是否在另一个选项卡中打开

问题描述

我想用 JavaScript 检查用户是否已经在浏览器的另一个标签中打开了我的网站.

I want to check with JavaScript if the user has already opened my website in another tab in their browser.

看来我不能用 pagevisibility...>

我看到的唯一方法是使用基于会话 cookie 的 WebSocket，并检查客户端是否有多个套接字.但是通过这种方式，从当前选项卡中，我必须询问我的服务器该用户是否在其当前浏览器选项卡旁边打开了一个选项卡.有点牵强！

It seems I cannot do that with pagevisibility...

也许使用 localstorage?

推荐答案

使用本地存储我创建了一个简单的演示，它应该可以完成您想要做的事情.基本上，它只是维护当前打开的窗口的计数.当窗口关闭时，卸载事件会触发并将其从总窗口计数中删除.

解决方案

当您第一次看到它时，您可能会认为发生的事情比实际情况要多.其中大部分是在谁是主要"角色中添加逻辑的一次大胆尝试.窗口，以及谁应该接任主要"关闭孩子时的窗口.(因此 setTimeout 调用重新检查是否应该将其提升到主窗口)

在此处查看所有操作:http://jsbin.com/mipanuro/1/edit

哦，是的，要实际看到它...在多个窗口中打开链接.:)

See it all in action here:http://jsbin.com/mipanuro/1/edit

我已经进行了必要的更改，以使本地存储维护主"存储.窗户.当您关闭选项卡时，子窗口可以提升为主窗口.有两种方法可以控制主"窗口状态通过传递给WindowStateManager 的构造函数的参数.这个实现比我之前的尝试要好得多.

Oh yeah, to actually see it in action... Open the link in multiple windows. :)

JavaScript:

JavaScript:

HTML:

HTML:

CSS:

#status
{
  display:table;
  width:100%;
  height:500px;
  border:1px solid black;
}
span
{
  vertical-align:middle;
  text-align:center;
  margin:0 auto;
  font-size:50px;
  font-family:arial;
  color:#ba3fa3;
  display:none;
}

#status.main .mainWindow,
#status.child .childWindow
{
  display:table-cell;
}

.mainWindow
{
  background-color:#22d86e;
}
.childWindow
{
  background-color:#70aeff;
}

这篇关于检查我的网站是否在另一个选项卡中打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！