- 1). Create two functions, one for when the browser is in focus, and one for when its focus is blurred:
var onFocus = function() {
// insert code to run when the window has gained focus.
};
var onBlur = function() {
// insert code to run when the window has lost focus.
}; - 2). Incorporate feature detection. This is primarily for Internet Explorer, but it's best to use feature detection rather than browser detection because it's more reliable to directly test for the feature you want to manipulate. Internet Explorer uses the property document.onfocusin and document.onfocusout rather than window.onfocus and window.onbur, so you will need to check to see if those document properties are defined:
if (document.onfocusin !== undefined) {
var onfocusin = true;
} else {
var onfocusin = false;
} - 3). Complete the code by binding the appropriate focus/blur events to the functions created in Step 1:
if (onfocusin === true) {
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}
previous post