How To Realize When A Browser Tab Has Been Duplicated

I'm having problems with a duplicate tab on Chrome (session's stuff) and I'd like to avoid the action of duplicating tabs (or lacking that close the duplicate one). I'm opening the

Solution 1:

Goal

Just to clarify: The goal is to is to detect (and close) a tab that has been opened via Chrome's "Duplicate" right-click menu option.

First try

The "Duplicate tab" action works almost exactly like when reloading a page after the user has clicked "Back" then "Forward", so you are basically implementing a version of this question:

functiononLoad()
{
    if ($('#myStateInput').val() === '') // Load with no state.
        $('#myStateInput').val('already loaded'); // Set stateelsealert("Loaded with state. (Duplicate tab or Back + Forward)");
}

Thats great and all, but you only want to detect when you "Duplicate tab". To do this we can blank out the state in onbeforeunload. This works because onbeforeunload gets only called when the user clicks "Back" or "Forward" but not when duplicating a tab.

Second try

functiononLoad()
{
    if ($('#myStateInput').val() === '') // Load with no state.
        $('#myStateInput').val('already loaded'); // Set stateelsealert("Duplicate tab! Do something.");

    $(window).on('beforeunload', function() // Back or Forward buttons
    {
        $('#myStateInput').val(''); // Blank the state out.
    });
}

Solution 2:

My application required that a user can only sign on once so I can use the localStorage to reliably cache records. The signon uses localStorage flags to enforce this requirement and uses the window.name to know which user owns the tab.

The issue was that the browser duplicate tab facility messed up the enforcement. The code below forces a signon page to appear in the duplicated tab if they duplicate a signed on session.

This solution was tested in Chrome. It makes use of the fact that a duplicated tab has no name. This characteristic may not exist in all browsers.

The preventDuplicateTab function is called very early in the page load sequence.

/* This prevents users from duplicating the tab.  If they do it
 * triggers the start page which checks for duplicate userid
 */functionpreventDuplicateTab() {
  if (sessionStorage.createTS) { 
    // Chrome at least has a blank window.name and we can use this// signal this is a duplicated tab.
    console.log("Existing sessionStorage "+sessionStorage.createTS+" 
               w.name="+window.name);
    if (!window.name) {
      window.name = "*ukn*";
      sessionStorage.createTS = Date.now(); // treat as new
      window.location = "/res/Frame.htm?page=start.htm"; // force to 
                                                               signon screen
    }
  } else {
    sessionStorage.createTS = Date.now();
    console.log("Create sessionStorage "+sessionStorage.createTS+" 
                                    w.name="+window.name);
  }
}

Solution 3:

In onLoad function, I used window.performance.getEntriesByType("navigation")[0]).type for check duplicate tab in browser.

If type value is back_forward, that value is duplicate tab.

I share for whom concerned.

var navigationType = (window.performance.getEntriesByType("navigation")[0]).type;
//back_forward value is duplicate tabif(navigationType == 'back_forward'){
    alert('Can not concurrent edit dashboard...');
}

Solution 4:

If you want to prevent multiple tabs (duplicate or not), you could use a combination of the accepted answer here, and one of the solutions to this question: https://stackoverflow.com/a/11008432/1257546

I know that my solution, with local and session storage, works for me :-)

If you have to detect sessions in multiple browsers you would need a server side solution.