How to realize when a browser tab has been duplica

Question

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 tab as it was a popup, with no address bar, no status bar, and no nothing, just the window. There's no way to duplicate a tab (opened as a popup) in IE and Firefox (at least I havent found one), but in chrome is still possible.

I also know I'm not able to programmatically check if there's an already open duplicated tab

Any idea how to approach this?

thanks!

Answer 1

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);
  }
}

Answer 2

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.
    });
}

Answer 3

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.