Обнаружение системного окна, перекрывающего iframe

Посмотрев на это видео youtube, мне было любопытно, как некоторые из представленных функций могут быть реализованы с помощью JS.

Один из моих основных вопросов - как можно обнаружить другое системное окно (например, окно слова, показанное в видео) на iframe.

На другом видео есть подсказка, указывающая на то, что техника основана на том, что браузеры оптимизируют рендеринг для элементов, которые не видны.

Я не мог использовать точные методы/свойства, которые используются.

о чем ты думаешь?

ОТВЕТЫ

Ответ 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

Ответ 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));

Также: