If you have a web application and you want to easily detect when a user has duplicated your site’s tab this solution is for you.
All modern browsers have a “duplicate tab” functionality, which allows users to continue working on pages they were, only in a new tab, thus allowing for multiple instances of the same web app. While in most cases this is great and this feature extends the use the user can obtain from the site, in some cases, it can cause a lot of problems. A duplicated tab starts off with almost everything that the original tab had, including sessionStorage, which is meant to use by a single tab.
How to detect when a user duplicates a tab
Well, the concept is to initialize a variable in sessionStorage when the user first loads the page, and afterward, if it exists and has a value of larger than 1, while the page loads, we’ll know it’s duplicated. Let’s call this variable “tabsopened” and set it to 1 once the page loads. This variable will help us recognize that this page is duplicated. If the user duplicates the tab, this variable already exists in the scope of the sessionStorage and will get the value of 2.
If the value is larger than 1 then it means the variable wasn’t initialized by our startup code, thus it’s duplicated.
It’s important to zero the value of this variable in order to allow for page refreshes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> window.addEventListener('beforeunload', function (e) { sessionStorage.tabsopened--; }); $( document ).ready(function() { if (sessionStorage.tabsopened == 'NaN' || sessionStorage.tabsopened == null || sessionStorage.tabsopened == 'undefined'){ sessionStorage.setItem('tabsopened', 0); } sessionStorage.tabsopened++; if (sessionStorage.tabsopened >= 2){ alert("this tab is duplicated!!!"); } }); </script> </head> <body> echo "it works!!!! "; ?> </body> </html> |