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

3 minuto(s)

En esta página:

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:


    <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>

// 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:


    <script type="text/javascript">

      document.addEventListener("visibilitychange", () => {

        // Podria estar oculto o visible 
        document.title = document.visibilityState; 

      }); 
      
    </script> 

  </body>

</html>

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.