Como Detectar Si El Usuario Cambia de Pestaña En El Navegador Con JavaScript

3 minuto(s)

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:

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:


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:


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.