How to refresh a page when it regains focus

Question

I would like to refresh a page after it gets back into focus. For the refreshing part I thought I might just use:

location.reload();

The tricky part is how do I determine when to refresh?
First the window has to loose the focus (which could be determined through .blur() I assume).

Only after the window which lost focus gets back into focus should trigger the refresh of itself. Can I use .focus() on location? Or do I have to use something else here?

How can I combine these two cases?

Harhay

What do you mean by after it got back into the focus? – Matheny

You probably want $(window).on('focus', ...) – Sheedy

on first focus, set some arbitrary global variable, like winFocus = 0;, then use conditional statements. if(winFocus == '0'){ winFocus = '1'} if(winFocus == '1'){ winFocus = 2}if(winFocus == '2'){ location.reload(); } Just re-write the code to work for you, and use it in your focus & blur calls. – Bloomsbury

You can use toggle functionality. wherein you change the state when the document loses focus. When focus in happens again, we check if the state was previously changed by blur. – Urbas

As a user, I can't imagine I want a page refreshing itself automatically when I go back to it from somewhere else. – Lase

Let's say the user is browsing in a popup for a while. So the current page would loose its focus, right? Now I thought after the user closes this popup it will be back in focus?! This is when I would need to refresh the page. – Harhay

See #2301778 and #4268330 and #1318506 – Matheny

Answer 1

Try this:

var blurred = false;
window.onblur = function() { blurred = true; };
window.onfocus = function() { blurred && (location.reload()); };

This only reloads the page if it has been hidden

I don't recommend binding to the window focus in jQuery, the Page will reload on pretty much every user action.

Update

This heavily relies on the browser implementation of window.onfocus and window.onblur. Webkit may not support the onblur event (in my chromium it didn't) where firefox calls a blur if the page is hidden.

Harumscarum

What does "blurred" do in the following? blurred && (location.reload()); – Voorhis

@helga blurred is false initially, set to true onBlur. blurred&& checks if blurred is true or false – Kermit

@Kermit Oooh, so it's a shortcut for IF without ELSE. I didn't know that, thanks! – Voorhis

How can I make this code work when the user clicks in a textarea inside of a bootstrap modal? It seems that on mobile browsers, it causes an entire page refresh. – Varrian

Answer 2

In my development environment I add this snippet of JS to a page - whenever the page becomes active after becoming inactive it reloads, so for example if you type in your text editor then click back onto your browser the page will reload once without an infinite loop. It also works when chaining active tab or active window within the same browser session.

window.onblur= function() {window.onfocus= function () {location.reload(true)}};

As stated above this does depend on browser implementation but works fine in chrome.

Hrutkay

Answer 3

@Eamonn 's approach works good for chrome as mentioned by him.

For Firefox:

window.disableResetPrompt;
window.onblur= function() {window.onfocus= function () {location.reload(true)}};

Sheepshearing