Is there a browser event for the window getting focus?

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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