Understanding JavaScript Behavior on Inactive Tabs

In order to prevent the display of the same feature in the system in more than one tab window, we are implementing the following actions:

同 When the second tab is opened with the same function
②US>Show alerts on tabs that were already open
③Close tabs that were already open when the alert OK was pressed

The current source is as follows, but immediately after の, the inactive tab will be closed.
If you activate a tab that was already open immediately after opening the second tab, the process stops when an alert appears.
Is it possible to make them do what I expect?Or, please let me know if there is a way to make it work closer.

// Call Action
let tabId = 'company-edit';
$(function(){
    setInterval(function(){
        callback(tabId)
    }, 1000);
});

// Multi-tab prohibition processing
let issuedAlready=false;

const callback=openedTabId=>{
    forbidMultiTab(openedTabId);
};

function forbidMultiTab(openedTabId){
    let tabId = openedTabId;
    let sessionTabId = sessionStorage.getItem(tabId);
    let localTabId = localStorage.getItem(tabId);

    let newAction=function(){
        let tabID = new Date().getTime();
        sessionStorage.setItem(tabId,tabID);
        localStorage.setItem(tabId,tabID);
        issuedAlready=true;
    };

    let currentAction=function(){
    };

    letoldAction=function(){
        alert('This feature cannot be opened in more than one window tab at the same time');
        window.open('about:blank','_self').close();
    };

    if(sessionTabId==null||(sessionTabId===localTabId&&!issuedAlready)){
        // When the tab ID is not saved in sessionStorage
        // "Or, for IE8, if you open from ""Open with New Tab"", the value of sessionStorage is copied, so the calling number flag is not displayed."
        newAction();

    } else if(sessionTabId===localTabId){
        // When the value of sessionStorage equals the value of localStorage
        currentAction();

    } else{
        oldAction();
    }
}

javascript

2022-09-30 10:50

1 Answers

I have solved it myself, so I will write down my trial and error.
I understand that if the alert is focused on other tabs after it is displayed, subsequent actions will flow just like when I press OK.
In the end, when there was no focus on the screen, I tried not to close it, and I was able to achieve the desired behavior.
Here's the source.


// Calling party description

let tabId = 'company-edit';
    $(function(){
        setInterval(function(){
            checkTab(tabId)
        }, 1000);
    });

// Time the screen was loaded
let loadingTime = new Date().getTime();

// Flag to prevent duplicate alerts from being configured
let setAlert=false;

// Flag to prevent the screen from closing when it is not active
let isFocus;
$(window).focus(function(){
    isFocus = true;
}).blur(function(){
    isFocus=false;
});

// You can call with arguments from setInterval by placing a function in a variable
constcheckTab=openedTabId=>{
    forbidMultiTab(openedTabId);
};

function forbidMultiTab(tabId){

    let localTabTimestamp;
    let localData=localStorage.getItem(tabId);
    if(localData){
        localData=JSON.parse(localData);
        localTabTimestamp=localData.time;
    }

    let sessionTabTimestamp;
    let sessionData=sessionStorage.getItem(tabId);
    if(sessionData){
        sessionData=JSON.parse(sessionData);
        sessionTabTimestamp=sessionData.time;
    }

    // For the first open screen
    let newAction=function(){
        issuedAlready=true;
        let tmpData={'time':loadingTime};
        sessionStorage.setItem(tabId, JSON.stringify(tmpData))); // Tab
        localStorage.setItem(tabId, JSON.stringify(tmpData))); // The entire browser
        // Set the event when the screen is closed
        $(function(){
            $(window).off("beforeunload");
            $(window).on("beforeunload", function(e){
                deleteLocalStorage(tabId);
            });
        });
    };

    let currentAction=function(){
    };

    // To close the screen
    let closeAction=function(){
        if(!setAlert&&isFocus){
            alert('This feature cannot be opened in more than one window tab at the same time.Close this tab.');
            window.open('about:blank','_self').close();
        }
    };

    if(sessionTabTimestamp==null) {
        // When the tab ID is not saved in sessionStorage
        newAction();

    } else if (localTabTimestamp===sessionTabTimestamp) {
        // When the value of sessionStorage equals the value of localStorage
        currentAction();

    } else if (localTabTimestamp<sessionTabTimestamp) {
        // When there is a previously opened tab
        closeAction();

    } else{
        // When the current screen load time is older
        localStorage.setItem(tabId, JSON.stringify({'time':loadingTime}});
    }

}

// Delete the time saved in localStorage
let deleteLocalStorage=function(){
    let localData=localStorage.getItem(tabId);
    localData=JSON.parse(localData);
    if(localData.time===loadingTime){
        localStorage.removeItem(tabId);
    }
};

2022-09-30 10:50

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656