Puede haber situaciones en las que necesitemos verificar si una pestaña del navegador está enfocada o no. Las razones para esto incluyen:
- Evite el envío de requests de red si el usuario no está utilizando la página, ya que esto reduciría la cantidad de carga en el servidor. Además, esto ahorraría el costo si estamos utilizando una API de terceros paga.
- Detenga la reproducción de medios cuando la pestaña no esté enfocada.
- Pausa automáticamente un juego en el navegador cuando el usuario cambia a otra ventana o pestaña.
- Muchos sitios rastrean el período de tiempo durante el cual el usuario realmente interactuó con el sitio web utilizando esta funcionalidad.
En este artículo, aprenderemos cómo implementar esta funcionalidad. Tenemos los siguientes dos métodos:
Uso de la API de visibilidad de la página: HTML5 proporciona la API de visibilidad de la página que le permite al desarrollador saber si la pestaña está actualmente visible o no. La API envía un evento de cambio de visibilidad cuando el usuario minimiza la ventana o cambia a otra pestaña. Esta API agrega las siguientes dos propiedades al objeto del documento y ambas propiedades son de solo lectura.
La propiedad document.hidden: esta propiedad devuelve falso cuando la pestaña actual es ‘visible’; de lo contrario, devuelve verdadero. La palabra clave visible tiene un significado especial aquí. Supongamos que abre otra ventana pequeña en la parte superior de la pestaña actual, document.hidden devolverá falso aunque la pestaña no esté enfocada porque el resto de la pestaña aún está visible y no está cubierto por la ventana pequeña.
La propiedad document.visibilityState: esta propiedad devuelve una string que indica el estado de visibilidad actual del documento. Los valores posibles son:
- visible: el contenido de la página es visible o al menos parcialmente visible como se explicó anteriormente.
- oculto:El contenido de la página no es visible para el usuario, ya sea porque la pestaña del documento está en segundo plano o como parte de una ventana minimizada, o porque la pantalla del dispositivo está apagada.
- preprocesar:La página se ha cargado pero el usuario no ha visto la página.
- descargado:La página está en proceso de descarga de la memoria, es decir, está a punto de cerrarse.
Ejemplo: Crearemos una página web que cambiará el color cuando el usuario cambie de pestaña o minimice la ventana.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
html,
body {
height: 100%;
}
body {
background-color: #f1f5f8;
}
#txt {
text-align: center;
}
.btn_container {
padding: 10px;
text-align: center;
}
#btn {
border-radius: 4px;
cursor: pointer;
padding: 4px 8px;
background-color: white;
font-size: 1.2em;
letter-spacing: 1px;
}
</style>
</head>
<body>
<h2 id="txt">Switch tab to change the background color.</h2>
<div class="btn_container">
<button id="btn">Original Color</button>
</div>
</body>
<script>
const ogcolor = "#f1f5f8";
const newcolor = "#39a9cb";
const txt = document.getElementById("txt");
const btn = document.getElementById("btn");
document.addEventListener("visibilitychange", function (event) {
if (document.hidden) {
document.body.style.backgroundColor = newcolor;
txt.innerText = "Background color has changed !";
}
});
btn.addEventListener("click", function () {
txt.innerText = "Switch tab to change the background color.";
document.body.style.backgroundColor = ogcolor;
});
</script>
</html>
Producción:
Usando los eventos window.onfocus y Window.onblur:
- window.onfocus: este evento se activa cuando la pestaña ha recibido el foco.
- window.onblur: el evento de desenfoque se activa cuando el usuario minimiza la ventana, cambia a otra pestaña o usa otra ventana. El evento de desenfoque se activa incluso cuando usamos otra ventana pequeña y la pestaña aún está parcialmente visible o incluso cuando hacemos clic en la barra de ubicación del navegador.
Ejemplo: Crearemos una página web que cambiaría de color cuando la pestaña pierda el foco. Aquí intentaremos cambiar a otra ventana y comprender la diferencia entre document.hidden y window.onblur.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
html,
body {
height: 100%;
}
body {
background-color: #f1f5f8;
}
#txt {
text-align: center;
}
.btn_container {
padding: 10px;
text-align: center;
}
#btn {
border-radius: 4px;
cursor: pointer;
padding: 4px 8px;
background-color: white;
font-size: 1.2em;
letter-spacing: 1px;
}
</style>
</head>
<body>
<h2 id="txt">Do not loose focus!</h2>
<div class="btn_container">
<button id="btn">Original Color</button>
</div>
</body>
<script>
const ogcolor = "#f1f5f8";
const newcolor = "#39a9cb";
const txt = document.getElementById("txt");
const btn = document.getElementById("btn");
window.onfocus = function () {
txt.innerText = "This tab is in focus!";
document.body.style.backgroundColor = ogcolor;
};
window.onblur = function () {
document.body.style.backgroundColor = newcolor;
txt.innerText = "Lost focus, background color has changed !";
};
btn.addEventListener("click", function () {
txt.innerText = "Switch tab to change the background color.";
document.body.style.backgroundColor = ogcolor;
});
</script>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pansaripulkit13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA