Event when a web page gets focused

Question

Google Reader has a nice feature that when you switch to the web page from a different web page (giving the page focus) it will show you the updates there were accumulated while the page was unfocused.
Quick question #1: How do they do that?

I figure that they might be binding to the mouse move events + keyboard events since I don't know any out of the box event that gives you that ability.

Googling for that is a nightmare (focus, tab, web page, user).

Quick question #2: Is there some package out there that gives me that ability?

I'm putting the jQuery tag as a beacon for all the web developers ninjas out there, but I don't really care about the framework (as long as its Javascript)

score 24 · Accepted Answer · edited Nov 29 '18 at 06:42

24

Try using jQuery's focus and blur functions:

$(window).focus(function() {
   console.log('welcome (back)');
});

$(window).blur(function() {
   console.log('bye bye');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click in and out of this frame to test the focus and blur functions.

edited Nov 29 '18 at 06:42

Ethan

4,295
4
25
44

answered Jan 10 '11 at 20:35

PeeHaa

71,436
58
190
262

2

jquery focus doesn't act like hover(function(), function()) (which is a shame), I needed to bind to the blur event for "focusOut" – Shay Erlichmen Jan 10 '11 at 20:53
1

Aight lol. Ofc you're right. My mistake, I switched the two. It should act like you said though :) Would be a nice feature. Thanks for improving it and accepting it :). – PeeHaa Jan 10 '11 at 21:40

jAndy · Answer 2 · 2011-01-11T15:39:44.703

5

Use focusin (focus) and focusout (blur) on the document object:

$(document).bind('focus', function() {
   console.log('welcome (back)');
}).bind('blur', function() {
   console.log('bye bye');
});

edited Jan 11 '11 at 15:39

answered Jan 10 '11 at 20:33

jAndy

231,737
57
305
359

2

I don't think OP wants to be notified every time any field on the page receives focus. Just when you switch to a page. – Ruan Mendes Jan 10 '11 at 20:39

score 5 · Answer 3 · answered Jan 10 '11 at 20:42

5

I tested in FF and document.onfocus is called when I switch to that window.

answered Jan 10 '11 at 20:42

Ruan Mendes

90,375
31
153
217

score 5 · Answer 4 · answered Jan 14 '21 at 07:01

5

The opposite of focus is blur.

document.addEventListener("focus", function(){
  console.log("Page in focus")
})

document.addEventListener("blur", function(){
  console.log("Page out of focus")
})

answered Jan 14 '21 at 07:01

NVRM

11,480
1
88
87

score 2 · Answer 5 · answered May 14 '21 at 21:25

2

There's a difference between the focus/blur events discussed by other answers, and the actual Visibility API. The best resource for this is the docs at MDN: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

answered May 14 '21 at 21:25

The Busy Wizard

956
1
7
11

Event when a web page gets focused

5 Answers5