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

Question

我想用 JavaScript 检查用户是否已经在浏览器的另一个选项卡中打开了我的网站。

看来我不能用 pagevisibility 做到这一点……

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

也许与 localstorage ？

原文由 ManUtopiK 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

当您第一次看到它时，您可能会认为发生的事情比实际发生的要多。其中大部分是尝试添加逻辑到谁是“主”窗口，以及当您关闭子窗口时谁应该接管“主”窗口。 （因此 setTimeout 调用以重新检查它是否应该提升到主窗口）经过一番摸索之后，我认为实施起来会花费太多时间并且不在这个问题的范围之内。但是，如果您打开了两个窗口（主窗口和子窗口）并关闭了主窗口，则子窗口将被提升为主窗口。

在大多数情况下，您应该能够大致了解正在发生的事情并将其用于您自己的实施。

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

哦，是的，要实际查看它的运行情况…在多个窗口中打开链接。 :)

更新：

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

脚本：

 // noprotect

var statusWindow = document.getElementById('status');

(function (win)
{
    //Private variables
    var _LOCALSTORAGE_KEY = 'WINDOW_VALIDATION';
    var RECHECK_WINDOW_DELAY_MS = 100;
    var _initialized = false;
    var _isMainWindow = false;
    var _unloaded = false;
    var _windowArray;
    var _windowId;
    var _isNewWindowPromotedToMain = false;
    var _onWindowUpdated;


    function WindowStateManager(isNewWindowPromotedToMain, onWindowUpdated)
    {
        //this.resetWindows();
        _onWindowUpdated = onWindowUpdated;
        _isNewWindowPromotedToMain = isNewWindowPromotedToMain;
        _windowId = Date.now().toString();

        bindUnload();

        determineWindowState.call(this);

        _initialized = true;

        _onWindowUpdated.call(this);
    }

    //Determine the state of the window
    //If its a main or child window
    function determineWindowState()
    {
        var self = this;
        var _previousState = _isMainWindow;

        _windowArray = localStorage.getItem(_LOCALSTORAGE_KEY);

        if (_windowArray === null || _windowArray === "NaN")
        {
            _windowArray = [];
        }
        else
        {
            _windowArray = JSON.parse(_windowArray);
        }

        if (_initialized)
        {
            //Determine if this window should be promoted
            if (_windowArray.length <= 1 ||
               (_isNewWindowPromotedToMain ? _windowArray[_windowArray.length - 1] : _windowArray[0]) === _windowId)
            {
                _isMainWindow = true;
            }
            else
            {
                _isMainWindow = false;
            }
        }
        else
        {
            if (_windowArray.length === 0)
            {
                _isMainWindow = true;
                _windowArray[0] = _windowId;
                localStorage.setItem(_LOCALSTORAGE_KEY, JSON.stringify(_windowArray));
            }
            else
            {
                _isMainWindow = false;
                _windowArray.push(_windowId);
                localStorage.setItem(_LOCALSTORAGE_KEY, JSON.stringify(_windowArray));
            }
        }

        //If the window state has been updated invoke callback
        if (_previousState !== _isMainWindow)
        {
            _onWindowUpdated.call(this);
        }

        //Perform a recheck of the window on a delay
        setTimeout(function()
                   {
                     determineWindowState.call(self);
                   }, RECHECK_WINDOW_DELAY_MS);
    }

    //Remove the window from the global count
    function removeWindow()
    {
        var __windowArray = JSON.parse(localStorage.getItem(_LOCALSTORAGE_KEY));
        for (var i = 0, length = __windowArray.length; i < length; i++)
        {
            if (__windowArray[i] === _windowId)
            {
                __windowArray.splice(i, 1);
                break;
            }
        }
        //Update the local storage with the new array
        localStorage.setItem(_LOCALSTORAGE_KEY, JSON.stringify(__windowArray));
    }

    //Bind unloading events
    function bindUnload()
    {
        win.addEventListener('beforeunload', function ()
        {
            if (!_unloaded)
            {
                removeWindow();
            }
        });
        win.addEventListener('unload', function ()
        {
            if (!_unloaded)
            {
                removeWindow();
            }
        });
    }

    WindowStateManager.prototype.isMainWindow = function ()
    {
        return _isMainWindow;
    };

    WindowStateManager.prototype.resetWindows = function ()
    {
        localStorage.removeItem(_LOCALSTORAGE_KEY);
    };

    win.WindowStateManager = WindowStateManager;
})(window);

var WindowStateManager = new WindowStateManager(false, windowUpdated);

function windowUpdated()
{
    //"this" is a reference to the WindowStateManager
    statusWindow.className = (this.isMainWindow() ? 'main' : 'child');
}
//Resets the count in case something goes wrong in code
//WindowStateManager.resetWindows()

HTML:

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id='status'>
    <span class='mainWindow'>Main Window</span>
    <span class='childWindow'>Child Window</span>
  </div>
</body>
</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;
}

原文由 cgatian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

带有 localStorage 和存储监听器的较短版本

<script type="text/javascript">
        // Broadcast that you're opening a page.
        localStorage.openpages = Date.now();
        var onLocalStorageEvent = function(e){
            if(e.key == "openpages"){
                // Listen if anybody else is opening the same page!
                localStorage.page_available = Date.now();
            }
            if(e.key == "page_available"){
                alert("One more page already open");
            }
        };
        window.addEventListener('storage', onLocalStorageEvent, false);
</script>

更新：

• 也适用于页面崩溃。
• 在chrome中刺激页面崩溃： chrome://inducebrowsercrashforrealz

现场演示

原文由 Sasi Varunan 发布，翻译遵循 CC BY-SA 4.0 许可协议