What is the best way to determine your web page has been made active (including switching browser tabs)?

I have a web page which is fetching new content (AJAX).

If the page does not have the focus (eg. Minimized, or you are on another b开发者_开发技巧rowser tab) I want to change the title of the page to display how many new comments have appeared.

When the user gives focus back to the page I want the title to remove the message.

The activation of the page seems to vary wildly between browsers. Firefox seems to be the simplest to implement. I had hoped there would be a simple jQuery solution but I haven't been able to find one.

At the moment it is implemented by checking to see if the mouse is moving over the page but if you click the page is active but the mouse hasn't mouseovered over the page.

To be clear, I don't need help changing the title of the page or with the AJAX, just determining if the page is active or not across all browsers.

Thanks in advance!

I suppose that what you are asking is browser specific. There is nothing in HTML specification regarding how a window or a tab is minimized. I suggest that you try to emulate the minimized event. Start a javascript timer and reset it every time the user interacts with the page. I wouldn't bother with mouse events. I would only reset the timer when the user clicked somewhere at the page. When the timer resets, change the title to display number of unread messages and set a periodical Ajax call to update the number. I believe that you should only change the title only if new messages appear.

This technique will work very well on the inactivation phase. Even if the user doesn't switch tab, the alert message will appear if the page is idle. This is no problem at all, in fact it could be desired behaviour. When the page becomes active again, present the user with a message like the one that appears in SO when new answers have been submitted to a question. Then the user will get alerted that new messages have appeared and will have to click on the notification close button, thus forcing the title to change back.

using focus on body element? but that only works, when somebody clicks in the page (not chooses the tab)

also, you can check how gmail does that - showing number of received new messages until someone views the page.

You can try

gBrowser.tabContainer.addEventListener("TabSelect", function (e) { this.myFunc(e); }, false);

It fires up whenever you select a tab. Enjoy! :)