javascript - Disallow login to website in multiple browserstabs at the same time - Stack Overflow

admin管理员组

文章数量:1315376

I have an ajax heavy website that breaks (or shows incorrect data) when users have it open in multiple browser windows at the same time. So I would like to enforce only allowing the user to be logged in to the website in one tab at a time, whether it is on the same puter or even multiple puters.

I am looking for ideas on how to do this.

Is there any JavaScript method to tell if a certain page is already open in another tab?

Perhaps there is another solution that could involve the server side..

For instance, the client could message the server every say, 1 minute. If the server gets messages from a certain users at a frequency higher than one message per minute, it knows that it is open in more than one window or tab. It can then let one of the clients know that it needs to shout an error to the user.

The idea of messaging the server every one minute does not sit that well with me though.

Any other ideas out there?

EDIT: some people are wondering why I have this problem in the first place. Here it goes: This is a time tracking application that is fully ajax. You can browse/create/delete/modify timers, projects and clients with ajax, without ever leaving the page. If the website is open in multiple tabs, things will get inconsistent very quickly. Errors usually even occur. For instance, user creates a project and then starts a timer in tab1, tab2 will not show these changes. And since it is all ajax, it will not simply sync when the user clicks some button in the second tab.

I have an ajax heavy website that breaks (or shows incorrect data) when users have it open in multiple browser windows at the same time. So I would like to enforce only allowing the user to be logged in to the website in one tab at a time, whether it is on the same puter or even multiple puters.

I am looking for ideas on how to do this.

Is there any JavaScript method to tell if a certain page is already open in another tab?

Perhaps there is another solution that could involve the server side..

For instance, the client could message the server every say, 1 minute. If the server gets messages from a certain users at a frequency higher than one message per minute, it knows that it is open in more than one window or tab. It can then let one of the clients know that it needs to shout an error to the user.

The idea of messaging the server every one minute does not sit that well with me though.

Any other ideas out there?

EDIT: some people are wondering why I have this problem in the first place. Here it goes: This is a time tracking application that is fully ajax. You can browse/create/delete/modify timers, projects and clients with ajax, without ever leaving the page. If the website is open in multiple tabs, things will get inconsistent very quickly. Errors usually even occur. For instance, user creates a project and then starts a timer in tab1, tab2 will not show these changes. And since it is all ajax, it will not simply sync when the user clicks some button in the second tab.

• javascript
• client-server

Share Improve this question Follow edited Feb 20, 2011 at 7:46 Jonah asked Feb 20, 2011 at 7:23 JonahJonah 2,08077 gold badges2929 silver badges3232 bronze badges 6

• 1 This smells like you're trying to fix a design problem at an end-point where you should not fix it. E.g it is causing racing conditions. But, why can't you fix (or ask about) the trouble that s going around on the server? – Caspar Kleijne Commented Feb 20, 2011 at 7:29
• Your edit confirmed my suspicion ;). you really need to fix this on the server. Is there many business-logic in the application that outputs the gui? – Caspar Kleijne Commented Feb 20, 2011 at 8:00
• yes, tons and tons of business logic. I think I would need to open a port on the browser or something so the server can send messages to the browser when another browser tab changes something. I think it would be very difficult to implement. – Jonah Commented Feb 20, 2011 at 8:06
• You can see the website for yourself.. but I don't want to link to it from here. But you can find it here: pastebin./tnSwAyDp – Jonah Commented Feb 20, 2011 at 8:14
• I just researched server pushing and it looks way plicated. Perhaps server polling would be ok.. – Jonah Commented Feb 20, 2011 at 8:28

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 2

Having read the update in your question, what I would really suggest is using WebSocket where available, falling back to Flash socket, long polling and forever iframe for older browsers (actually I'd use Socket.IO to make it all easy - you can use a similar abstraction for whatever environment you are using). That way you can make all of your windows and tabs consistent in real time - problem solved.

That having been said if you don't want to do it for some reason (though what you are trying to do would be a perfect application for WebSockets so think about it) you might use sessionStorage and localStorage to distinguish sessions between tabs or windows for the same logged in user, but it is not widely available yet - see the patibility table so it would be probably easier to go real-time with a socket.io-like solution where there are a lot of fallbacks available than to restrict visitors to one tab - not to mention the user experience.

There's no way to get information about other tabs/windows in javascript (and for good reason).

The best way I can think to do it would be to print a unique identifier (a timestamp should work reasonably well) in the javascript code for each page, and then it periodically ping the server with that unique ID, and associate it on the server with the user. This way if you have more than one ID belonging to a single user being pinged within a given interval, you can send back a response to the page to warn the user that having multiple tabs open will result in unexpected behavior.

(Like Caspar said above though, you should really figure out why the unexpected behavior is happening and fix that rather than force the user to act a certain way)

This is pretty lo-fi, but I think the simplicity may make it work: you could try having the login open the session in a named window (or change the name of the current window). Then, on load inside the application, check to see if the browser window name is the one you've allowed them to use; if not, pop up an alert, close the window, focus on the named window, if still there. (If not there--i.e., they've already closed the other window--you could let this one stay open, and change the name to the correct name.)

So you're essentially using window.name and window.opener. Rough idea, but an idea.

I have a similar situation and the solution I use is:

1. on server: at every login you create an unique ID, save it (ex. database) and return it to client.
2. on client: on every transaction you send this ID to server as a parameter.
3. on server: if saved and received ID match then allow the request to execute if not refuse it with an error code.
4. on client: if transaction failed with specific code then you know that "ID" verification failed and you logout user.

So in this way if the same credentials will be used again in any other tab, browser, PC, country,... the old tab will logout user on next transaction request. Or in other words limiting only one opened page per user on the whole world.

Edit: As I have stopped using html requests for any data munication and use websockets, I register user on server and if same user wants to login from some other location I close the previously used socket (the page automatically logs out). In this way I also have a way to trigger full page reloads from server in case admin does something that influences users.

Simply use cookies.

$(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);

}

本文标签： javascriptDisallow login to website in multiple browserstabs at the same timeStack Overflow