Possible to detect if a user has multiple tabs of your site open?

Question

I'm just thinking about the whole site registration process.

A user goes to your site, signs up, and then you tell him you've sent him an email and he needs to verify his email address. So he hits Ctrl+T, pops open a new tab, hits his Gmail fav button, doesn't read a word of your lengthy welcome email, but clicks the first link he sees. Gmail opens your site in yet another tab...

He doesn't need nor want two tabs for your site open, he just wants to view that darn page you've disallowed him access to until he registers.

So what do we do? I saw one site (but I forget what it was) that did a really good job, and it actually refreshed the first tab I had open without me having to press anything.

I'm thinking, it might be nice if we can detect if the user already has a tab to your site open, we could either close the new verification-tab automatically, or tell him he can close it can go back to his other tab (which we've now refreshed and logged him in).

Or, maybe when he got your annoying "please check your email" message, he went directly to his email, replacing your site with his email knowing full well that the email will link him back to the site again. In that case, we don't want to close the tab, but maybe could have saved his location from before, and redirect him there again?

Anyway, that's just the use case... the question still stands. Can we detect if a user already has a tab to your site open?

---

This question is not about how to detect when a user has completed the sign-up process. Ajax polling or comet can solve that issue. I specifically want to know if the user already has a tab open to your site or not.

Solution 1

I'm fairly late to the party here (over a year), but I couldn't help but notice that you'd missed an incredibly easy and elegant solution (and probably what that website you saw used).

Using JavaScript you can change the name of the window you currently have open through:

window.name = "myWindow";

Then when you send out your confirmation email simply do (assuming you're sending a HTML email):

<a href="verificationlink.php" target="myWindow">Verify</a>

Which should result in the verificationLink opening up inside the window your website was already loaded into, if it's already been closed it'll open up a new tab with the window name specified.

Solution 2

You can send an AJAX request every X seconds from the original tab that asks the server if it received a request from the email.

You cannot close the second tab automatically, but you could have it ask the server after 3X seconds whether it heard from the first tab.

Solution 3

What I have here is a little bit different use case to you but it detects if the site is being accessed in another tab. In this case I wanted to limit people using some call center pages to only one tab. It works well and is purely client-side.

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

Solution 4

To flesh out John's answer, here is a working solution that uses plain JS and localStorage and updates the DOM with the count of the currently open tabs. Note that this solution detects the number of open tabs/windows for a given domain within one browser, but does not maintain the count across different browsers.

It uses the storage event to keep the count synchronized across all open tabs/windows without any need for refreshing the page.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
(function() {
    var stor = window.localStorage;
    window.addEventListener("load", function(e) {
        var openTabs = stor.getItem("openTabs");
        if (openTabs) {
            openTabs++;
            stor.setItem("openTabs", openTabs)
        } else {
            stor.setItem("openTabs", 1)
        }
        render();
    })
    window.addEventListener("unload", function(e) {
        e.preventDefault();
        var openTabs = stor.getItem("openTabs");
        if (openTabs) {
            openTabs--;
            stor.setItem("openTabs", openTabs)
        }
        e.returnValue = '';
    });
    window.addEventListener('storage', function(e) {
        render();
    })

    function render() {
        var openTabs = stor.getItem("openTabs");
        var tabnum = document.getElementById("tabnum");
        var dname = document.getElementById("dname");
        tabnum.textContent = openTabs;
        dname.textContent = window.location.host
    }
}());
</script>
</head>
<body>
<div style="width:100%;height:100%;text-align:center;">
    <h1 >You Have<h1>
        <h1 id="tabnum">0</h1>
    <h1>Tab(s) of <span id="dname"></span> Open</h1>
</div>
</body>
</html>

Solution 5

To add to other answers: You can also use localStorage. Have an entry like 'openedTabs'. When your page is opened, increase this number. When user leaves the page, decrease it.

View more solutions

Comments

[SLaks]

Then you'd still have the first tab.

[spender]

Yes. That's what happens in a signup process. We're well used to it.

[mpen]

Then both tabs have the same page open... we don't need two with the exact same page. I'm asking how I can close one of them.

[spender]

They wouldn't though. You'd have one tab with the final page of your signup, the other with your destination. What do you intend to do when you've discovered the other tab? Try to close it? That's unexpected.

[mpen]

Then inform them that they can close it because the other tab contains the info they want. And it wouldn't contain the "final page of the signup" because we've just redirected them, remember? My suggestion was (a) if the user has two tabs open, close one, or inform him that it can be closed, and refresh the other, or (b) if the user already closed the original tab, then redirect the new one

[Jhourlad Estrella]

Won't work if page is opened in two different browsers. But of course that was not mentioned in the question so WTH am I saying? :D

[bvs]

This doesn't really answer the question: "Can we detect if a user already has a tab to your site open?" Another example could be that you want to warn the user if they have two windows open on your site.

[mpen]

Can you summarize what you're doing here? Looks like you're giving each window/tab a random name and saving that into a cookie. Then you check the cookie every 10 seconds and if it doesn't match, you alert them? When they back down to 1 tab, will it reset the name so that the first tab is in a good state?

[Jon Bernhardt]

The first tab doesn't get an error message; only subsequent tabs do. Thank you, @anthony-vipond -- This is exactly what I was looking for.