How to realize when a browser tab has been duplicated

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!

score 13 · Accepted Answer · edited May 23 '17 at 12:10

13

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

edited May 23 '17 at 12:10

Community

1
1

answered Jan 24 '15 at 00:28

JosiahDaniels

2,411
20
37

Hi @JosiahDaniels, this seems to work great with Chrome, but when I've tested it in IE10 the alert didn't appeared, do you know if there's a workaround for IE? I'll keep working, in case I solve it I will answer here, regards – maxivis Nov 13 '15 at 23:35
3

@maxivis The IE duplicate button does the equivalent of copying the url, opening a new tab, and pasting. No form data is preserved. Other than really ugly hacks using cookies, I don't see a good way to handle this. – JosiahDaniels Nov 16 '15 at 14:39
It's true what JosiahDaniels said, is like copy and paste the URL. In case anyone needs it, I solved it with cookies – maxivis Nov 17 '15 at 14:02
You can also use [BroadcastChannel](https://stackoverflow.com/a/62231610/975097) to detect duplicate tabs. – Anderson Green Feb 07 '21 at 01:47
1

I have a solution using BroadcastChannel here - https://stackoverflow.com/a/74261626/10827704 – Hari R Nov 07 '22 at 10:07
Doesn't work with modern chrome. – dominikduda Nov 23 '22 at 16:26

score 6 · Answer 2 · answered Jul 14 '17 at 04:19

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

window.name is accessible to all pages in the tab, and so we will not be able to depend on it right? — Hari R, Nov 07 '22 at 10:06

score 6 · Answer 3 · answered Nov 09 '20 at 07:19

6

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

answered Nov 09 '20 at 07:19

Hien Nguyen

24,551
7
52
62

Good solution, but how can i tell the original browser tab that a clone has been made of it? The original tabs navigationType is still `reload` for me – Ian Steffy Dec 21 '21 at 09:01
If I navigate back and then forward in the same tab, the page's onload would be triggered and we would wrongly consider the tab as duplicated right? – Hari R Nov 07 '22 at 09:56

score 1 · Answer 4 · answered Oct 18 '22 at 18:05

1

I encountered the same issue and created a npm package for this use case.

It does cover most browsers and use-cases.

https://www.npmjs.com/package/is-tab-duplicated

answered Oct 18 '22 at 18:05

Touko

31
1
6

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/32974739) – user16217248 Oct 23 '22 at 17:45

score 1 · Answer 5 · answered Oct 31 '22 at 10:02

Nice to see that this question has answers coming up even now. I was facing this issue as well and I solved it by the following method, but with a catch.

I depend upon Session Storage for a Tab based storage, where I store a unique ID. Every time our page initializes, we use Broadcast Channel to ask the other tabs whether they have the same uniqueID. If they do, we can just refresh the Unique ID for the new tab.

You can find more details in the Repository Readme - https://github.com/haricane8133/unique-tabid

The NPM package I published is at https://www.npmjs.com/package/unique-tabid, and an example of how to use this package in a React app is at https://github.com/haricane8133/unique-tabid-client.

Thank you! I am testing your package, and it is working like a charm :) — Lucas D'Avila, Mar 28 '23 at 21:44

score 0 · Answer 6 · answered Feb 08 '18 at 14:25

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.

How to realize when a browser tab has been duplicated

6 Answers6

Linked