检测覆盖 iframe 的系统窗口

Posted 2023-02-22

【中文标题】检测覆盖 iframe 的系统窗口

【英文标题】：Detecting a system window overlaying an iframe

【发布时间】：2018-11-09 07:58:26

【问题描述】：

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

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

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

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

你的想法是什么？

【问题讨论】：

该视频已有 4 年历史，因此如果它是已修补的漏洞，则可能不再可能。

spider.io 已被 Google 收购，代码仍然有效

看这里productblog.appnexus.com/…

【参考方案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/

【讨论】：

谢谢，你提供了很好的信息（对我来说不是什么新鲜事）......如果不可能，你能猜猜他们使用的方法是什么吗？

可以确认：requestAnimationFrame 调用中没有明显差异jsfiddle.net/Farbdose/u2tquxbxchromestatus.com/feature/4514713492783104 只会根据视口坐标而不是实际重叠来减慢执行速度。

广告可能是用adobe flash制作的。

【参考方案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。

【讨论】：

非常令人印象深刻的演示，但是这不适用于另一个应用程序窗口（例如 word）

@RoniGadot 我不确定您的视频是纯 javascript 还是真实的。其他开发人员会发现同样的事情。

希望我的回答对您有所帮助，但在 javascript 中我们无能为力。

@Hors Sujet，这个视频是由spider.io制作的，被谷歌收购了，所以我猜它是真的。我很好奇这是什么技术。

奇怪的是只有一个人发现...spider.io/blog/2011/10/calling-out-to-researchersacademics这可能是浏览器问题：youtube.com/watch?v=mngp2ACiZLM