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

Question

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

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

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

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

Что вы думаете?

Answer 1

Вы должны проверить 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));

Также:

• Вы можете сравнить время (+new Date()) между двумя setInterval для обнаружения неактивного браузера. Дроссель Chrome и Firefox setTimeout / setInterval в неактивных вкладках .

Answer 2

То, что я знаю, можно определить, находится ли страница на переднем плане или на заднем плане - или, точнее, если есть фокус или нет фокуса.

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.

---

Лучше использовать API видимости :

• , работает при переключении вкладок (страница может обнаружить, что пользователь имеетоткрыл еще одну вкладку)

Примечание. Хотя onblur и onfocus сообщат вам, переключает ли пользователь окна, это не обязательно означает, что они скрыты.Страницы становятся скрытыми, только когда пользователь переключает вкладки или сворачивает окно браузера, содержащее вкладку.

см. Определить, активна ли вкладка браузера или пользователь отключился

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

---

Для прокрутки имеется Intersection Observer

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

---

// РЕДАКТИРОВАТЬ: В настоящее время невозможно обнаружить такие случаи, как, например, в первом видео, которое вы разместили (в 2:09), когдадругое окно затенено некоторым элементом:

Если я ошибаюсь, исправьте меня.

относящиеся:

• Как узнать, когда браузер перестает перерисовывать слои / узлы DOM, потому что они скрыты?

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