How to realize when a browser tab has been duplicated

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:

function onLoad()
{
    if ($('#myStateInput').val() === '') // Load with no state.
        $('#myStateInput').val('already loaded'); // Set state
    else
        alert("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

function onLoad()
{
    if ($('#myStateInput').val() === '') // Load with no state.
        $('#myStateInput').val('already loaded'); // Set state
    else
        alert("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
 */
function preventDuplicateTab() {
  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 tab
if(navigationType == 'back_forward'){
    alert('Can not concurrent edit dashboard...');
}