websocket 检查我的网站是否已在其他标签页中打开

p5cysglq  于 2022-11-11  发布在  其他
关注(0)|答案(4)|浏览(136)

我想用JavaScript检查用户是否已经在浏览器的另一个选项卡中打开了我的网站。
看来pagevisibility不行啊......
我看到的唯一方法是使用基于会话cookie的WebSocket，并检查客户端是否有多个套接字。但这样一来，从当前选项卡，我必须询问我的服务器，如果这个用户有一个选项卡打开的权利旁边，他们的当前浏览器选项卡。这是有点牵强！
也许用localstorage？

websocket

4条答案

按热度按时间
ma8fv8wu

ma8fv8wu1#

我知道现在很晚了，但也许能帮助别人
这段代码将检测有多少选项卡是打开的，有多少是活动的（可见的），如果没有选项卡是活动的，它将选择最后打开的选项卡，作为活动的。
这段代码也会处理windows/tab崩溃，并且会在崩溃时刷新计数。
由于堆栈溢出当前不支持localStorage，请测试here。

<html>
<body>
Open in several tabs or windows
<div id="holder_element"></div>

<script type="text/javascript">
    //localStorage.clear();
    manage_crash();

    //Create a windows ID for each windows that is oppened
    var current_window_id = Date.now() + "";//convert to string
    var time_period = 3000;//ms

    //Check to see if PageVisibility API is supported or not
    var PV_API = page_visibility_API_check();

    /************************
  **PAGE VISIBILITY API**
  *************************/
    function page_visibility_API_check ()
    {
        var page_visibility_API = false;
        var visibility_change_handler = false;
        if ('hidden' in document)
        {
            page_visibility_API = 'hidden';
            visibility_change_handler = 'visibilitychange';
        }
        else
        {
            var prefixes = ['webkit','moz','ms','o'];
            //loop over all the known prefixes
            for (var i = 0; i < prefixes.length; i++){
                if ((prefixes[i] + 'Hidden') in document)
                {
                    page_visibility_API = prefixes[i] + 'Hidden';
                    visibility_change_handler = prefixes[i] + 'visibilitychange';
                }
            }
        }

        if (!page_visibility_API)
        {
            //PageVisibility API is not supported in this device
            return page_visibility_API;
        }

        return {"hidden": page_visibility_API, "handler": visibility_change_handler};
    }

    if (PV_API)
    {
        document.addEventListener(PV_API.handler, function(){
            //console.log("current_window_id", current_window_id, "document[PV_API.hidden]", document[PV_API.hidden]);
            if (document[PV_API.hidden])
            {
                //windows is hidden now
                remove_from_active_windows(current_window_id);
                //skip_once = true;
            }
            else
            {
                //windows is visible now
                //add_to_active_windows(current_window_id);
                //skip_once = false;
                check_current_window_status ();
            }
        }, false);
    }

    /********************************************
  **ADD CURRENT WINDOW TO main_windows LIST**
  *********************************************/
    add_to_main_windows_list(current_window_id);
    //update active_window to current window
    localStorage.active_window = current_window_id;

    /**************************************************************************
  **REMOVE CURRENT WINDOWS FROM THE main_windows LIST ON CLOSE OR REFRESH**
  ***************************************************************************/
    window.addEventListener('beforeunload', function ()
    {
        remove_from_main_windows_list(current_window_id);
    });

    /*****************************
  **ADD TO main_windows LIST**
  ******************************/
    function add_to_main_windows_list(window_id)
    {
        var temp_main_windows_list = get_main_windows_list();
        var index = temp_main_windows_list.indexOf(window_id);

        if (index < 0)
        {
            //this windows is not in the list currently
            temp_main_windows_list.push(window_id);
        }

        localStorage.main_windows = temp_main_windows_list.join(",");

        return temp_main_windows_list;
    }

    /**************************
  **GET main_windows LIST**
  ***************************/
    function get_main_windows_list()
    {
        var temp_main_windows_list = [];
        if (localStorage.main_windows)
        {
            temp_main_windows_list = (localStorage.main_windows).split(",");
        }

        return temp_main_windows_list;
    }

    /**********************************************
  **REMOVE WINDOWS FROM THE main_windows LIST**
  ***********************************************/
    function remove_from_main_windows_list(window_id)
    {
        var temp_main_windows_list = [];
        if (localStorage.main_windows)
        {
            temp_main_windows_list = (localStorage.main_windows).split(",");
        }

        var index = temp_main_windows_list.indexOf(window_id);
        if (index > -1) {
            temp_main_windows_list.splice(index, 1);
        }

        localStorage.main_windows = temp_main_windows_list.join(",");

        //remove from active windows too
        remove_from_active_windows(window_id);

        return temp_main_windows_list;
    }

    /**************************
  **GET active_windows LIST**
  ***************************/
    function get_active_windows_list()
    {
        var temp_active_windows_list = [];
        if (localStorage.actived_windows)
        {
            temp_active_windows_list = (localStorage.actived_windows).split(",");
        }

        return temp_active_windows_list;
    }

    /*************************************
  **REMOVE FROM actived_windows LIST**
  **************************************/
    function remove_from_active_windows(window_id)
    {
        var temp_active_windows_list = get_active_windows_list();

        var index = temp_active_windows_list.indexOf(window_id);
        if (index > -1) {
            temp_active_windows_list.splice(index, 1);
        }

        localStorage.actived_windows = temp_active_windows_list.join(",");

        return temp_active_windows_list;
    }

    /********************************
  **ADD TO actived_windows LIST**
  *********************************/
    function add_to_active_windows(window_id)
    {
        var temp_active_windows_list = get_active_windows_list();

        var index = temp_active_windows_list.indexOf(window_id);

        if (index < 0)
        {
            //this windows is not in active list currently
            temp_active_windows_list.push(window_id);
        }

        localStorage.actived_windows = temp_active_windows_list.join(",");

        return temp_active_windows_list;
    }

    /*****************
  **MANAGE CRASH**
  ******************/
    //If the last update didn't happened recently (more than time_period*2)
    //we will clear saved localStorage's data and reload the page
    function manage_crash()
    {
        if (localStorage.last_update)
        {
            if (parseInt(localStorage.last_update) + (time_period * 2) < Date.now())
            {
                //seems a crash came! who knows!?
                //localStorage.clear();
                localStorage.removeItem('main_windows');
                localStorage.removeItem('actived_windows');
                localStorage.removeItem('active_window');
                localStorage.removeItem('last_update');
                location.reload();
            }
        }
    }

    /********************************
  **CHECK CURRENT WINDOW STATUS**
  *********************************/
    function check_current_window_status(test)
    {
        manage_crash();

        if (PV_API)
        {
            var active_status = "Inactive";
            var windows_list = get_main_windows_list();

            var active_windows_list = get_active_windows_list();

            if (windows_list.indexOf(localStorage.active_window) < 0)
            {
                //last actived windows is not alive anymore!
                //remove_from_main_windows_list(localStorage.active_window);

                //set the last added window, as active_window
                localStorage.active_window = windows_list[windows_list.length - 1];
            }

            if (! document[PV_API.hidden])
            {
                //Window's page is visible
                localStorage.active_window = current_window_id;
            }

            if (localStorage.active_window == current_window_id)
            {
                active_status = "Active";
            }

            if (active_status == "Active")
            {
                active_windows_list = add_to_active_windows(current_window_id);
            }
            else
            {
                active_windows_list = remove_from_active_windows(current_window_id);
            }

            console.log(test, active_windows_list);

            var element_holder = document.getElementById("holder_element");
            element_holder.insertAdjacentHTML("afterbegin", "<div>"+element_holder.childElementCount+") Current Windows is "+ active_status +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+active_windows_list.length+" window(s) is visible and active of "+ windows_list.length +" windows</div>");
        }
        else
        {
            console.log("PageVisibility API is not supported :(");
            //our INACTIVE pages, will remain INACTIVE forever, you need to make some action in this case!
        }

        localStorage.last_update = Date.now();
    }

    //check storage continuously
    setInterval(function(){
        check_current_window_status ();
    }, time_period);

    //initial check
    check_current_window_status ();
</script>
</body>
</html>
赞(0）分享  回复(0）举报  2022-11-11
ilmyapht

ilmyapht2#

带有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个

Live demo

赞(0）分享  回复(0）举报  2022-11-11
brc7rcf0

brc7rcf03#

使用本地存储，我创建了一个简单的演示，它应该可以完成你想要做的事情。基本上，它只是维护当前打开的窗口的计数。当窗口关闭时，unload事件触发，并将其从总窗口计数中删除。
当你第一次看到它的时候，你可能会认为它比实际情况要复杂得多。它的大部分内容都是为了给谁是“主”窗口以及在关闭子窗口时谁应该接管“主”窗口添加逻辑。（因此setTimeout调用来重新检查它是否应该被提升到主窗口）经过一些思考之后，我认为这将花费太多的时间来实现，并且超出了这个问题的范围。但是，如果您打开了两个窗口（主窗口和子窗口），并且您关闭了主窗口，则子窗口将被提升为主窗口。
在大多数情况下，您应该能够获得正在发生的事情的一般概念，并将其用于您自己的实现。
请在此处查看所有操作：http://jsbin.com/mipanuro/1/edit
哦，是的，要真正看到它的运行...在多个窗口中打开链接。：）

更新：

我已经做了必要的修改，让本地存储保持“主”窗口。当你关闭标签时，子窗口可以升级为主窗口。有两种方法可以通过传递给WindowStateManager的构造函数的参数来控制“主”窗口的状态。这个实现比我以前的尝试要好得多。

JavaScript程式码：

// 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;
}
赞(0）分享  回复(0）举报  2022-11-11
ruarlubt

ruarlubt4#

**（2021）**您可以使用BroadcastChannel在相同来源的选项卡之间进行通信。

例如，将以下代码放在js代码的顶层，然后打开2个标签进行测试：

const bc = new BroadcastChannel("my-awesome-site");

bc.onmessage = (event) => {
  if (event.data === `Am I the first?`) {
    bc.postMessage(`No you're not.`);
    alert(`Another tab of this site just got opened`);
  }
  if (event.data === `No you're not.`) {
    alert(`An instance of this site is already running`);
  }
};

bc.postMessage(`Am I the first?`);
赞(0）分享  回复(0）举报  2022-11-11
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com