另外：

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

上面的代码段使用事件监听器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），当另一个窗口被遮挡了一些元素时：

如果我错了，请纠正我。

相关：

Answer 2

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

也许是这样的：

demo

您可以在此处试用我的演示：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。

检测覆盖iframe的系统窗口

2 个答案:

另外：