68

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.

Krisztián Balla
  • 19,223
  • 13
  • 68
  • 84
Rod
  • 14,529
  • 31
  • 118
  • 230

4 Answers4

101

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);
Mohd Abdul Mujib
  • 13,071
  • 8
  • 64
  • 88
Daniel Vandersluis
  • 91,582
  • 23
  • 169
  • 153
18
$(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); 
}
Brett Weber
  • 1,839
  • 18
  • 22
  • 7
    Please include a comment for the downvote as this appears, to me at least, to be an acceptable addition to this question. – Brett Weber Jul 19 '14 at 14:43
  • It's not a acceptable answer, as there is no .one() method, there is only an .on() method, I've corrected you answer. – mas-designs Apr 16 '15 at 13:03
  • 22
    There is a 'one' method in jQuery and it is quite handy: https://api.jquery.com/one/ – Lindsay Jun 02 '15 at 21:14
  • 2
    Mt]y answer is acceptable and a correct answer. It applies a single time event for each. Obviously circumstances from experience will add to the requirements of the code, but one() as a function is the method to trap the concerned event – Brett Weber Jun 08 '15 at 02:28
  • 2
    People who haven't seen one probably just thought it was a typo. Your answer is great but only if you don't want this to happen if the user leaves and comes back to focus the window again without rebinding via the chain of one calls. – NateDSaint Jul 01 '15 at 21:08
11

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

Pylinux
  • 11,278
  • 4
  • 60
  • 67
  • 8
    This is not helping for the case for when the browser window is still visible but not in focus. – Domi Mar 09 '15 at 11:30
1
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();
prashantsahni
  • 2,128
  • 19
  • 20