How to determine if a user has opened more than one window or tab in a single session?

Question

I would like to find out if the user has several windows or tabs open in one session, and if he did, I would like to print special information on the screen.

This limte should only require one special URL, so if the user has two tabs / windows with URLs: http://page.com/limite.htm - I would like to print special information when the user opens two windows / tabs with URLs: http://page.com/limite.htm and http://page.com/index.htm - everything is in order and I will not show any information.

Is it possible? Thanks.

Answer 1

I think the best way to do this is with localStorage. http://www.gwtproject.org/doc/latest/DevGuideHtml5Storage.html

From the link, about localStorage:

Accessibility for other Windows / tabs: Common for each window and tabs of one browser with the same web application

So, you can set the record when the tab / window is open, and change it when it is closed. When another tab / window is open, first check this value.

Obviously, you need to be careful: for example, a browser crash may not trigger the “close” part, so the user will not be able to open a new tab, even if it is not open (localStorage is saved!). If you have server sessions, you can ask the user to log in again (or start your authentication process again) and reset this value. You can also try using the sessionStorage entry to track this issue. From the link, about sessionStorage:

Persistence: Survives only as long as its original window or tab.

In addition, there is something called Cross-Window Transfer that allows you to communicate between tabs, but check if this is supported in the browsers you want to support.

http://ajaxian.com/archives/cross-window-messaging-with-html-5-postmessage

Answer 2

Today I did something very similar. Hope this helps.

// helper function to set cookies function setCookie(cname, cvalue, seconds) { var d = new Date(); d.setTime(d.getTime() + (seconds * 1000)); var expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } // helper function to get a cookie function getCookie(cname) { var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for(var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } // Do not allow multiple call center tabs if (~window.location.hash.indexOf('#admin/callcenter')) { $(window).on('beforeunload onbeforeunload', function(){ document.cookie = 'ic_window_id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; }); function validateCallCenterTab() { var win_id_cookie_duration = 10; // in seconds if (!window.name) { window.name = Math.random().toString(); } if (!getCookie('ic_window_id') || window.name === getCookie('ic_window_id')) { // This means they are using just one tab. Set/clobber the cookie to prolong the tab validity. setCookie('ic_window_id', window.name, win_id_cookie_duration); } else if (getCookie('ic_window_id') !== window.name) { // this means another browser tab is open, alert them to close the tabs until there is only one remaining var message = 'You cannot have this website open in multiple tabs. ' + 'Please close them until there is only one remaining. Thanks!'; $('html').html(message); clearInterval(callCenterInterval); throw 'Multiple call center tabs error. Program terminating.'; } } callCenterInterval = setInterval(validateCallCenterTab, 3000); } 

Answer 3

LocalStorage will not work through protocols, so if a user opens your site on one tab using http and another tab using https, both of these tabs will see separate localStorage objects. Cookies do not have the same problem (they have other problems, for example, bloating the size of each HTTP request to your site).

The sample code below contains a map in which the key is a unique identifier for a browser tab, and the value is a timestamp indicating when the last tab confirmed that it was still open. The map is stored in a cookie. This is not an ideal approach - each tab is updated every 3 seconds, and not instantly, and there are race conditions (several tabs that update the same cookie), but depending on what you can do after that.

If you run this code only on a specific page that you (more or less) know when this page has been opened several times in the same browser. Or run it on every page of your website and find out when your website was opened on several tabs.

The cookie reader / writer code is omitted for brevity (but taken from fooobar.com/questions/984775 / ... ) and the cookie data is encoded using json for simplicity, but you get this idea.

If you run this code and view cookies using the FireBug cookie tab, you will see a cookie update when you open and close the tabs. In fact, something like warning the user when several tabs open, remains as an exercise for the reader.

 var timePeriod = 3000; // 3 seconds function tabHandler() { // ensure the current window has an identifier set if (!window.name.match(/^MySite[0-9]{3}/)) { window.name = 'MySite' + Math.round(Math.random() * 1000); } // read in the state of all the tabs var tabCookie = readCookie('tabs') || null; var tabs = JSON.parse(tabCookie) || {}; // update the timestamp for the current tab var now = (new Date()).getTime(); tabs[window.name] = now; // remove tab details that haven't had their timestamp updated var tooOld = timePeriod * 2; for (var tabKey in tabs) { if ((now - tabs[tabKey]) > tooOld) { delete tabs[tabKey]; } } // write back the current state of tabs createCookie('tabs', JSON.stringify(tabs), 1); setTimeout(tabHandler, timePeriod); } setTimeout(tabHandler, timePeriod);