Detect Another Application on Browser Window (including percentage overlap)

Question

Is there a way to detect if an application (say a chat client or msword) is on top of my browser window.

One way is to check for focus. But that does not absolutely say that another program is on top of the "view-able" area of the browser with respect to complete screen.

What if the complete browser is viewable but the focus is on the word document/chat client.

Edit:

Found a sample demo from a company which does this http://www.spider.io/vStp83jg6/

Answer 1

I don't think this requires flash or any plugin, in order to be effective this has to be based on CSS and Javascript.

The security sandbox of the browser prevents accessing this information from the operating system.

The only thing that they can be doing consistently across browsers is to detect some sort of side effect of the fact that the browser window is hidden by another window.

One of the side effects that can be detected is if browser rendering optimizations for painting elements have kicked in or not.

According to the spider.io viewability video, they are already detecting if an add is visible based on browser rendering optimizations detection.

If an add is not visible, then for that section of the page rendering optimizations kick in and the rendering of that section of the page will become slower, in order to save memory and CPU resources, and speed up the rendering of the visible portion of the page.

This same technique could be used to detect if a browser window is hidden or not.

If they detect that rendering optimizations are ongoing in several regions like the 4 corners of the visible viewport and the center of the page they can safely assume that the app is hidden by another external app, or calculate an estimation for the percentage overlap.

They don't say how they do it in detail, but as it's based on speed measurements it might be something like this:

One way that could be used for detecting if another window is hiding the browser:

Create a small invisible CSS3 or Javascript based animation that animates invisible elements in different parts of the page. The animations should not affect the performance of the page and can be started/stopped at will.

Measure the timings of the animation at page startup, and take an average. If the page get's hidden by another OS window, then the rendering optimizations kick in and the time that the animation takes to run is longer.

Check here a browser API to detect the start and stop of CSS3 animations, this could be a way to implement this.