Detecting a system window overlaying an iframe

Question

After looking at this youtube video I was curious how some of the features shown, can be implemented with JS.

One of my major questions is how can one detect another system window (like the word window, shown in the video) on the iframe.

On another video there is a hint suggesting that the technic is based on the fact that browsers optimize rendering for elements that are out of the view.

I couldn't tap into what are the exact methods/properties that are used.

What are your thoughts?

Answer 1

What I know it's possible to detect if page is in foreground or in background - or more precisely: if has focus or has not focus.

var focus = true;
window.onblur = function() { focus = false; action(); }
window.onfocus = function() { focus = true; action(); }

document.onblur = window.onblur;
document.focus = window.focus;
 
function action(){
 if(focus) {
  document.body.style.background = "green";
 } else {
  document.body.style.background = "lightgray";
 }
}

try click inside and then outside

The above code snippet uses event listeners onblur and onfocus for events focus and blur.  

---

 

Better can be to use Visibility API:

• it works when switching tabs (page can detect that user has opened another tab)

Note: While onblur and onfocus will tell you if the user switches windows, it doesn't necessarily mean it's hidden. Pages only become hidden when the user switches tabs or minimizes the browser window containing the tab.

see Detect if browser tab is active or user has switched away

http://jsbin.com/lowocepazo/edit?js,output

---

For scrolling there is an Intersection Observer

provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport

---

//EDIT: Nowdays is not possible to detect such cases like for example in 1st video you posted (in 2:09) when another window is obscured some element:  

If I'm wrong, please correct me.

related:

• How can I tell when the browser stops repainting DOM layers/nodes because they are obscured?

• https://www.html5rocks.com/en/tutorials/speed/animated-gifs/

Answer 2

You have to check document.hasFocus and position/size of windows and screen monitor.

Maybe like this :

You can try my demo here : https://jsfiddle.net/p9ahuo3t/

let bool = document.hasFocus();

$("p.info").text("in");
console.log(outerWidth + screenX)
if (screen.width < outerWidth + screenX) {
    bool = false;
    $("p.info").text("right side: out");
} else if ((outerWidth - innerWidth) + screenX < 0) {
    bool = false;
    $("p.info").text("left side: out");
} else if (screen.height < outerHeight + screenY) {
    bool = false;
    $("p.info").text("bottom side: out");
} else if ((outerHeight - innerHeight) + screenY < 0) {
    bool = false;
    $("p.info").text("top side: out");
}

if (currentChild && !currentChild.closed) {  
    let rectPage = {
        left:   (outerWidth - innerWidth) + screenX,
        top:    (outerHeight - innerHeight) + screenY,
        right:  outerWidth + screenX,
        bottom: outerHeight + screenY
    };

    let rectPopup = {
        left:   currentChild.screenX,
        top:    currentChild.screenY,
        right:  currentChild.outerWidth + currentChild.screenX,
        bottom: currentChild.outerHeight + currentChild.screenY
    }; 
    if (intersectRect(rectPage, rectPopup)) {
        $("p.info").text("eclipse with popup");
        bool = false;
    }
}
$page.text(pin(bool));

Also :

• You can compare the time (+new Date()) between two setInterval to detect inactive browser. Chrome and Firefox throttle setTimeout/setInterval in inactive tabs.