Is there a browser event for the window getting focus?

JavascriptJquery

Javascript Problem Overview


Is there a way that when I click on my browser, and give it focus, to run a method once? And then when the browser loses focus and then gets the focus back to again run that method only once, again.

Javascript Solutions


Solution 1 - Javascript

You can attach focus and blur event handlers on the window object to track if the window gets or loses focus (see http://jsfiddle.net/whQFz/ for a trivial example). window applies to the current browser context (so that could be a window, a tab, a frame, etc.).

Note : The focus event will fire every time the window gets focus and the blur event will fire every time it loses focus. An example of something that takes focus away from the window is an alert window. If you try to alert in an onfocus event handler you'll get an infinite loop of alerts!

// Set global counter variable to verify event instances
var nCounter = 0;

// Set up event handler to produce text for the window focus event
window.addEventListener("focus", function(event) 
{ 
    document.getElementById('message').innerHTML = "window has focus " + nCounter; 
    nCounter = nCounter + 1; 
}, false);

// Example of the blur event as opposed to focus
// window.addEventListener("blur", function(event) { 
// document.getElementById('message').innerHTML = "window lost focus"; }, 
// false);

Solution 2 - Javascript

$(document).ready(function() { $(window).one("focus", SomeFocusMethod); } );

var SomeFocusMethod = function()
{
    // do stuff
    $(window).one("blur", SomeBlurMethod);
}

var SomeBlurMethod = function() 
{ 
    // do stuff
    $(window).one("focus", SomeFocusMethod); 
}

Solution 3 - Javascript

If you are targeting browsers newer than IE9 you should really use the "Page Visibility API" javascript browser api: https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API

Solution 4 - Javascript

function blinkTab() {
	const browserTitle = document.title;
	
	const stopBlinking = () => {
		document.title = browserTitle;
	};
	
	const startBlinking = () => {
		document.title = 'My New Title';
	};
	
	function registerEvents() {
		window.addEventListener("focus", function(event) { 
			stopBlinking();
		}, false);
		
		window.addEventListener("blur", function(event) {
			setInterval(() => {
				startBlinking();
			}, 500);
			
		}, false);
	};
	
	registerEvents();
};


blinkTab();

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRodView Question on Stackoverflow
Solution 1 - JavascriptDaniel VandersluisView Answer on Stackoverflow
Solution 2 - JavascriptBrett WeberView Answer on Stackoverflow
Solution 3 - JavascriptPylinuxView Answer on Stackoverflow
Solution 4 - JavascriptprashantsahniView Answer on Stackoverflow