Detect If Browser Tab Has Focus
Yes, window.onfocus
and window.onblur
should work for your scenario:
http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
Detect if browser tab is active or user has switched away
Now we can use the visibility API.
To deal with the different browser-specific syntaxes, I made this small code :
var vis = (function(){
var stateKey, eventKey, keys = {
hidden: "visibilitychange",
webkitHidden: "webkitvisibilitychange",
mozHidden: "mozvisibilitychange",
msHidden: "msvisibilitychange"
};
for (stateKey in keys) {
if (stateKey in document) {
eventKey = keys[stateKey];
break;
}
}
return function(c) {
if (c) document.addEventListener(eventKey, c);
return !document[stateKey];
}
})();
Usage :
var visible = vis(); // gives current state
vis(aFunction); // registers a handler for visibility changes
Example :
vis(function(){
document.title = vis() ? 'Visible' : 'Not visible';
});
Demonstration page
Check if the browser tab is in focus in ReactJS
This should work:
componentDidMount() {
window.addEventListener("focus", this.onFocus)
}
componentWillUnmount() {
window.removeEventListener("focus", this.onFocus)
}
onFocus = () => {
//
}
Edit: same goes for "blur" and it should work for when the tab becomes hidden.
Check @Assaf's answer for usage with hooks.
javascript how check if browser got focus
Simply, you can check whether window is on focus or not by using native javascript event handler. we will use window.onblur to check if window isn't on focus and use window.onfocus to check if window is on focus.
window.onblur = function(){
// do some event handler here...in your case, to show new message alert on the title if the user receive new message.
newMessageChecker();
}
window.onfocus = function(){
// invoke another function to bring back your default title and destroy the Interval you have created.
destroyMessageChecker();
}
function newMessageChecker(){
// check if the user have new message. you may use setInterval method
window.messageChecker = setInterval(function(){
// if true, do some stuff like this
document.title = "New Message("+ messageCount +") : " + yourDefaultTitleValue;
}, 3000);
}
function destroyMessageChecker(){
// change your title to default value
document.title = yourDefaultTitleValue;
clearInterval(window.messageChecker);
}
for more information about window event, please take a look at this link Window Event Attributes. if you prefer to use jQuery please check this page Using jQuery to bind “focus” and “blur” functions for “window”
Is there a way to detect if a browser window is not currently active?
Since originally writing this answer, a new specification has reached recommendation status thanks to the W3C. The Page Visibility API (on MDN) now allows us to more accurately detect when a page is hidden to the user.
document.addEventListener("visibilitychange", onchange);
Current browser support:
- Chrome 13+
- Internet Explorer 10+
- Firefox 10+
- Opera 12.10+ [read notes]
The following code falls back to the less reliable blur/focus method in incompatible browsers:
(function() {
var hidden = "hidden";
// Standards:
if (hidden in document)
document.addEventListener("visibilitychange", onchange);
else if ((hidden = "mozHidden") in document)
document.addEventListener("mozvisibilitychange", onchange);
else if ((hidden = "webkitHidden") in document)
document.addEventListener("webkitvisibilitychange", onchange);
else if ((hidden = "msHidden") in document)
document.addEventListener("msvisibilitychange", onchange);
// IE 9 and lower:
else if ("onfocusin" in document)
document.onfocusin = document.onfocusout = onchange;
// All others:
else
window.onpageshow = window.onpagehide
= window.onfocus = window.onblur = onchange;
function onchange (evt) {
var v = "visible", h = "hidden",
evtMap = {
focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
};
evt = evt || window.event;
if (evt.type in evtMap)
document.body.className = evtMap[evt.type];
else
document.body.className = this[hidden] ? "hidden" : "visible";
}
// set the initial state (but only if browser supports the Page Visibility API)
if( document[hidden] !== undefined )
onchange({type: document[hidden] ? "blur" : "focus"});
})();
onfocusin
and onfocusout
are required for IE 9 and lower, while all others make use of onfocus
and onblur
, except for iOS, which uses onpageshow
and onpagehide
.
Javascript to detect if user changes tab
You can determine if a tab or window is active by attaching a blur / focus event listener to window.
in jQuery it would be
$(window).focus(function() {
//do something
});
$(window).blur(function() {
//do something
});
quoted from this SO answer: https://stackoverflow.com/a/1760268/680578
How to detect when a tab is focused or not in Chrome with Javascript?
2015 update: The new HTML5 way with visibility API (taken from Blowsie's comment):
document.addEventListener('visibilitychange', function(){
document.title = document.hidden; // change tab text for demo
})
The code the original poster gives (in the question) now works, as of 2011:
window.addEventListener('focus', function() {
document.title = 'focused';
});
window.addEventListener('blur', function() {
document.title = 'not focused';
});
edit: As of a few months later in Chrome 14, this will still work, but the user must have interacted with the page by clicking anywhere in the window at least once. Merely scrolling and such is insufficient to make this work. Doing window.focus()
does not make this work automatically either. If anyone knows of a workaround, please mention.
Related Topics
How to Change Reactjs Styles Dynamically
Bootstrap Collapsed Menu Links Not Working on Mobile Devices
Set the Webkit-Keyframes From/To Parameter with JavaScript
Blinking/Flickering with Jqm and Phonegap on Android
How to Check Element's Visibility via JavaScript
Arrange Multiple Divs in CSS/Js
How to Set the Universal CSS Selector with JavaScript
IE8 V8 Not Changing Class for a Dom Element Despite Js Function Changing the Element Attribute
Disabling the Context Menu on Long Taps on Android
Capture Keys Typed on Android Virtual Keyboard Using JavaScript
Jquery Mobile Prevent Scroll-To-Top Before Page Transition
Jqgrid Viewgridrow Dialog Big Span and Icon
Toggle Divs Without Using JavaScript
Change Image Based on Dropdown Using JavaScript
Why Are CSS Animations and Transitions Blocked by JavaScript
External CSS Styles Cant Be Accessed in Google Chrome