javascript - 检测覆盖 iframe 的系统窗口

Question

看了this youtube video之后我很好奇显示的某些功能如何用 JS 实现。

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

关于 another video有迹象表明该技术基于浏览器优化 View 外元素的渲染这一事实。

我无法了解使用的确切方法/属性是什么。

你有什么想法？

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 :

• 它在切换标签时有效(页面可以检测到用户打开了另一个标签)

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.

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

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

---

对于滚动有一个 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

---

//编辑:现在无法检测到此类情况，例如在您发布的第一个视频(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/