Обнаружение системного окна, перекрывающего 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
и положение/размер окон и экранного монитора.
Может быть, вот так:
Вы можете попробовать мою демонстрацию здесь: 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));
Также: