javascript - una - ventanas emergentes jquery

Detectando una ventana del sistema superponiendo un iframe

Question

Después de ver este video de youtube, sentí curiosidad por cómo algunas de las funciones mostradas pueden implementarse con JS.

Una de mis preguntas principales es cómo se puede detectar otra ventana del sistema (como la ventana de palabras, que se muestra en el video) en el iframe.

En otro video hay una pista que sugiere que la técnica se basa en el hecho de que los navegadores optimizan la representación de los elementos que están fuera de la vista.

No pude aprovechar cuáles son los métodos / propiedades exactos que se utilizan.

¿Cuáles son tus pensamientos?

Answer 1

Debe verificar document.hasFocus y la posición / tamaño de las ventanas y el monitor de pantalla.

Tal vez así:

Puedes probar mi demo aquí: 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));

También :

• Puede comparar la hora (+new Date()) entre dos setInterval para detectar el navegador inactivo. Chrome y Firefox aceleran setTimeout / setInterval en pestañas inactivas .

Answer 2

Lo que sé es posible detectar si la página está en primer plano o en segundo plano, o más precisamente: si tiene enfoque o no está enfocado.

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

El fragmento de código anterior utiliza detectores de eventos onblur y onfocus para eventos que se focus y blur .

Mejor puede ser usar la API de Visibilidad :

• funciona cuando se cambian las pestañas (la página puede detectar que el usuario ha abierto otra pestaña)

Nota: aunque onblur y onfocus le dirán si el usuario cambia de ventana, no significa necesariamente que esté oculto. Las páginas solo se ocultan cuando el usuario cambia de pestaña o minimiza la ventana del navegador que contiene la pestaña.

vea Detectar si la pestaña del navegador está activa o el usuario se ha alejado

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

Para el desplazamiento hay un observador de intersecciones.

proporciona una manera de observar de forma asíncrona los cambios en la intersección de un elemento de destino con un elemento ancestro o con la ventana de un documento de nivel superior

// EDITAR: Hoy en día no es posible detectar casos como, por ejemplo, en el primer video que publicaste (en 2:09) cuando otra ventana está oculta algún elemento:

Si estoy equivocado, por favor corrígeme.

relacionado:

• ¿Cómo puedo saber cuándo el navegador deja de pintar capas / nodos DOM porque están ocultos?

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