检测覆盖iframe的系统窗口

Question

看了这个youtube视频后,我很好奇所展示的一些功能如何用JS实现.

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

在另一个视频中,有一个提示暗示该技术是基于浏览器优化渲染视图之外的元素的事实.

我无法利用所使用的确切方法/属性.

你的想法是什么？

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

上面的代码片段使用事件侦听器onblur以及onfocus事件focus和blur.  

 

更好的是可以使用Visibility API:

• 切换选项卡时(页面可以检测到用户已打开另一个选项卡)

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

请参阅检测浏览器选项卡是否处于活动状态或用户是否已切换

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

对于滚动,有一个交叉观察者

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

//编辑:现在无法检测到这样的情况,例如您发布的第一个视频(2:09),当另一个窗口被遮挡时某个元素:  

如果我错了,请纠正我.

有关:

• 如何判断浏览器何时停止重新绘制DOM图层/节点,因为它们被遮挡了？

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