I'd like to track when a certain web-page is (or is not) in the foreground.
I've already experimented with the Page Visibility API, and I can use it to find out if my page is the currently active tab of its window. But I also need to know when my page's window is not in the foreground (despite being the active one of that window).
Is this something I can detect using javascript?
I use focus and blur events for this, you can do it cross-browser on $(window) with JQuery. Your needs don't appear to require the Page Visibility API, since you only care about if the tab (and window) has actual focus.
You can use hasFocus event, when it is in foreground (active or not) send to ajax call to server. Here is more info.
Related
Is there any way we can ensure that there is absolutely no overlay (inactive window) over an webpage being rendered on a browser?
focus, blur and visibility listener logic does the work for an active window.
But what about an inactive window that is using something like AlwaysOnTop with the help of AHK?
Is there any way in JS to detect that?
Have you tried listening for the visibilitychange event?
Is there a cross browser event that can be used to show a message to the user returning to their web page?
For example, a user has ten applications or tabs open. They get a new notification from our app and I show a notification box. When they switch to our tab I want to begin our notification animation.
The activate event is common on desktop applications but so far, on the window, document and body, neither the "activate" or "DOMActivate" do anything when swapping between applications or tabs but the "focus" and "blur" do. This event works but the naming is different and the events that should be doing this are not.
So is the right event to use cross browser or is there another event?
You can test by adding this in the console or page and then swapping between applications or tabs:
window.addEventListener("focus", function(e) {console.log("focused at " + performance.now()) } )
window.addEventListener("blur", function(e) {console.log("blurred at " + performance.now()) } )
Update:
In the link to the possible duplicate is a link to the W3 Page Visibility doc here.
It says to use the visibilitychange event to check when the page is visible or hidden like so:
document.addEventListener('visibilitychange', handleVisibilityChange, false);
But there are issues:
The Document of the top level browsing context can be in one of the
following visibility states:
hidden
The Document is not visible at all on any screen. visible
The Document is at least partially visible on at least one screen. This is the same condition under which the hidden attribute is set to
false.
So it explains why it's not firing when switching apps. But even when switching apps and the window is completely hidden the event does not trigger (in Firefox).
So at the end of the page is this note:
The Page Visibility API enables developers to know when a Document is
visible or in focus. Existing mechanisms, such as the focus and blur
events, when attached to the Window object already provide a mechanism
to detect when the Document is the active document.
So it would seem to suggest that it's accepted practice to use focus and blur to detect window activation or app switching.
I found this answer that is close to what would be needed to make a cross browser solution but needs focus and blur (at least for Firefox).
Observation:
StackOverflow has a policy against mentioning frameworks or libraries. The answers linked here have upvotes for the "best" answer.
But these can grow outdated. Since yesterday I found mention of two frameworks (polyfills) that attempt to solve this same problem here for visibly and isVis (not creating a link). If this is a question and answer site and a valid answer is, "here is some code that works for me" but "Here is the library I created using the same code that can be kept up to date and maintained on github" is not valid then in my opinion it's missing it's goal.
I know above should probably go to meta and I have but they resist changing the status quo for some reason. Mentioning it here since it's a relevant example.
The Page lifecycle API can be used to listen for visibilitychange events.
[This event triggers] when a user navigates to a new page, switches tabs, closes a tab, minimizes or closes the browser, or switches apps on mobile operating systems. Quote
Current browser support
Reference on MDN
Is there a way to detect if the browser window is visible to the user? I know this has been asked before. However, the answers I have seen suffer from the following problems:
Using visibilityChange event. The problem with this approach is that (at least on a Mac) when one uses cmd+tab to switch between applications, this event is not fired.
Using onBlur and onFocus events. These solve the above problem. However, these also fire when a page's visibility does not change. For example, if the browser is open in one half of the screen and another application is open in the other half, then switching between these will cause these events to fire; even though the user has the browser window visible all the time.
Using onPageShow and onPageHide events - these appear quite useless for the task of visibility. For example, onPageHide does not fire either when the page is minimized, or when cmd+tab is used to switch to another application that occupies the whole window.
What is the ideal solution for checking whether the page is visible to the user given the above issues?
Thank you.
Could you use setIterval polling and document.hidden?
nice wrapper Visibility.js
I know what focus() and blur() are, they respectively are that an element gets focus and an element loses focus. In my question I would like to talk about those events on the window object.
What I want is the following, alternatives to focus(), blur() that do the following:
If the webpage is in the view of the client, then it should be in focus. Being in the view is defined as:
Normally looking at the webpage.
Having the webpage window in the view, but have focus on some other screen in the OS. For example you have Skype open, but the browser is still visible in the background.
If the webpage cannot be seen by the client, then it should be not in focus. Defined as:
The user being in full screen mode in some other application.
The browser being completely overlapped by another (set of) applications.
The browser being on a different tab and thus not rendering the webpage visible.
What are the alternatives I could use to accomplish this behaviour?
I remember that facebook did something similar,
Lets say you loaded facebook.com, browsed around a bit and then opened a new tab to read some news, meanwhile you had updates to your facebook feed, but they would not be automatically displayed when you switched back to the facebook tab, only when you switched to the facebook tab they would then fire the event for fetching the feed updates.
How is this done?
It can by done by detecting in javascript if the browser window gained focus.
Dynamic changes on the page or ajax calls are probably done only when the browser window has focus. More about detecting browser window focus in javascript:
Is there a way to detect if a browser window is not currently active?