A veces necesitamos verificar si la pestaña actual del navegador está activa o no. Cuando abre YouTube y ve una película durante mucho tiempo en el navegador, el tiempo de espera automático de la pantalla no funciona, pero cuando abre Facebook, después de un tiempo, la pantalla se apaga debido al tiempo de espera de la pantalla del dispositivo. Entonces, ¿cómo sabe YouTube si una pestaña está activa?
En este artículo, discutiremos esto. Para lograr esta funcionalidad tenemos los siguientes métodos.
- La API de visibilidad de la página
- Ventana.onfocus y Ventana.onblur
La API de visibilidad de página: les permite a los desarrolladores saber si la pestaña actual está actualmente activa o no. Cuando el usuario cambia a otra pestaña o minimiza la ventana, se activa el evento de cambio de visibilidad de página. Esta API agregó estas propiedades al objeto del documento.
- document.hidden: devuelve verdadero cuando la página no está enfocada y devuelve falso cuando la página está enfocada.
- document.visibilityState: Devuelve el estado de visibilidad actual del documento. Devuelve estos estados como » oculto «, «visible» , «descargado» y «preprocesado» . oculto significa que la pestaña actual no está enfocada, visible significa que la pestaña actual está enfocada, descargado significa que la pestaña actual está a punto de cerrarse, renderizado previo significa que la página se ha cargado pero el usuario no ha visto la página. Es una propiedad de solo lectura, no se puede modificar.
- document.onvisibilitychange: un eventListener cuando se activa el evento de cambio de visibilidad .
Ejemplo: en este ejemplo, estamos creando una ventana emergente que se cierra automáticamente cuando el usuario se mueve a otra pestaña o minimiza la ventana.
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
.popup {
height: 300px;
width: 300px;
margin: 0 auto;
border: 1px solid;
box-shadow: 7px 7px 167px 1px #585858;
display: none;
justify-content: center;
align-items: center;
margin-top: 100px;
background: #f1f1f1;
font-family: cursive;
}
</style>
</head>
<body>
<center>
<h1>Sample popup</h1>
<button id="btn">click me</button>
</center>
<div class="popup">
<p>I am a PopUp</p>
</div>
<script>
let btn = document.querySelector("#btn");
let pop = document.querySelector(".popup");
btn.addEventListener("click", () => {
pop.style.display = "flex";
});
document.addEventListener("visibilitychange", () => {
pop.style.display = "none";
});
</script>
</body>
</html>
Producción :
El Método onfocus/onblur: Estos eventos también se utilizan para saber si el elemento es visible o no. Pero hay un problema con este método. Si está abriendo una pequeña ventana encima de su ventana actual, entonces se llama al evento onblur , y cuando cierra esa pequeña ventana, no se llama al método onfocus y la ventana permanece en un estado borroso.
Ejemplo: en este ejemplo, mostramos una ventana emergente que desaparece automáticamente cuando el usuario enfoca la pestaña actual.
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
.popup {
height: 300px;
width: 300px;
margin: 0 auto;
border: 1px solid;
box-shadow: 7px 7px 167px 1px #585858;
display: none;
justify-content: center;
align-items: center;
margin-top: 100px;
background: #f1f1f1;
font-family: cursive;
}
</style>
</head>
<body>
<center>
<h1>Sample popup</h1>
<button id="btn">click me</button>
</center>
<div class="popup">
<p>I am a PopUp</p>
</div>
<script>
let btn = document.querySelector("#btn");
let pop = document.querySelector(".popup");
btn.addEventListener("click", () => {
pop.style.display = "flex";
});
window.onblur = () => (pop.style.display = "none");
window.onfocus = () => alert("onfocus event called");
</script>
</body>
</html>
Salida: cuando el usuario cambia su enfoque a otra ventana y luego vuelve a la ventana original, alerta diciendo el siguiente mensaje.
onfocus event called
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA