检测覆盖 iframe 的系统窗口

Question

看了this youtube video之后，我很好奇展示的一些功能是如何用JS实现的。

我的一个主要问题是如何在 iframe 上检测到另一个系统窗口（如视频中显示的单词窗口）。

在another video 上有一个提示表明该技术是基于浏览器优化视图之外的元素的呈现这一事实。

我无法了解所使用的确切方法/属性。

你的想法是什么？

Answer 1

据我所知，可以检测页面是在前台还是在后台 - 或者更准确地说：是否有焦点。

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

上面的代码 sn-p 使用事件侦听器 onblur 和 onfocus 来处理事件 focus 和 blur。

---

 

最好使用Visibility API:

• 切换标签页时有效（页面可以检测到用户打开了另一个标签页）

注意：虽然 onblur 和 onfocus 会告诉您用户是否切换了窗口，但这并不一定意味着它是隐藏的。只有当用户切换选项卡或最小化包含该选项卡的浏览器窗口时，页面才会隐藏。

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

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

---

对于滚动有一个Intersection Observer

提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法

---

//编辑： 现在无法检测到此类情况，例如在您发布的第一个视频（2:09）中，当另一个窗口被某些元素遮挡时：

如果我错了，请纠正我。

相关：

• 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

您必须检查document.hasFocus 以及窗口和屏幕监视器的位置/大小。

可能是这样的：

你可以在这里试试我的演示：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));

还有：

• 您可以比较两个 setInterval 之间的时间(+new Date()) 来检测非活动浏览器。 Chrome and Firefox throttle setTimeout/setInterval in inactive tabs。