Demo Github
Si por alguna razón quieres a detectar cuando un usuario cambia de pestaña en el navegador web, en este Post te enseñare un par de métodos que pueden ser de gran utilidad. Lo haremos con JavaScript puro y podrás aplicarlo a tus proyectos y adaptarlel código a tus necesidades. Bien en este Post te enseñaré a Como Detectar Cuando Los Usuarios Cambian de Pestaña En El Navegador Con JavaScript, vamos con ello.
Antes de continuar te invito a leer los siguientes artículos:
- Mostrar un Mensaje en Una Determinada Fecha con Javascript (Con Imagen)
- 5 Características de JavaScript en Desuso y sus Alternativas
- Como Crear un Reloj Digital (Numérico) con JavaScript
- Como crear el Efecto modo Oscuro – Claro en un Sitio Web (Mantener el modo seleccionado en las demás Páginas)
- Como Verificar si 2 Contraseñas Coinciden o son Iguales con JavaScript
- 5 Cosas que Talvez no Sabías sobre try-catch-finally en JavaScript
- Exportar e Importar Módulos en JavaScript
- Generar una URL Amigable (Slug) usando un determinado Texto con JavaScript
- Implementación de Queues (Colas) en JavaScript
- 5 Conceptos de JavaScript que los Desarrolladores Principiantes deben saber
- El método flatMap() de JavaScript
- Puedes leer más en la categoría JavaScript
Asimismo, te invito a escuchar el Podcast: “Como Mantenerte Motivado Para Seguir Programando” y “¿ Porqué Es Importante Saber Programar en la Ciberseguridad ?” (Anchor Podcast):
| Spotify: | Sound Cloud: | Apple Podcasts | Anchor Podcasts |
 |
 |
 |
 |
Bien ahora continuemos con el Post: Como Detectar Si El Usuario Cambia de Pestaña En El Navegador Con JavaScript.
Como Detectar Si El Usuario Cambia de Pestaña En El Navegador Con JavaScript
Veamos a continuación 2 métodos para hacerlo con JavaScript:
Método 1
En este método, usaremos dos detectores de eventos focus (cuando el usuario se enfoca en su sitio web o ventana) y blur (cuando el usuario pierde el foco). En realidad, no necesitamos HTML, porque cuando los usuarios están en otra pestaña del navegador, no verán la página de tu sitio web. Solo el código JavaScript hará la tarea:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script type="text/javascript"> // Cuando el usuario pierde el foco o sale de tu pestaña (sitio web) window.addEventListener("blur", () => { document.title = "Breakup"; }); // Cuando el enfoque del usuario vuelve a tu pestaña (sitio web) nuevamente window.addEventListener("focus", () => { document.title = "Patch Up"; }); </script> </body> </html> |
En el código anterior, he colocado el código JavaScript antes de la etiqueta de cierre </body>.
Método 2
En este método, solo necesitamos un detector de eventos (visibilitychange). Tiene una propiedad llamada visibilityStateque() que podemos usar para detectar el estado de cambio de ventana del navegador:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript"> document.addEventListener("visibilitychange", () => { // Podria estar oculto o visible document.title = document.visibilityState; }); </script> </body> </html> |
Al igual que el código del método 1, he colocado el código JavaScript antes de la etiqueta de cierre </body>.
Conclusión
Esto es todo lo que necesita para detectar cuando los usuarios cambian de pestaña. Ambos métodos funcionan como se esperaba. Puedes usar cualquiera de ellos.
Nota(s)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.