Modificar el Título de una Página al Cambiar de Pestaña

por

¡Aloha, developah! 😀

Estaba visitando la página de Yoigo y he visto que tienen un efecto bastante chulo para lo simple que es de realizar.

Se trata de que cuando entras en su web, te muestra el title original de la página pero cuando ponemos el foco en otro sitio, este cambia por otro totalmente distinto.

Title original al entrar en la página
Al entrar en la página
Se acaba de modificar el título de una página al cambiar de pestaña
Al cambiar de pestaña

La clave para poder modificar el título de una página al cambiar de pestaña, es recurriendo a los manejadores de eventos (event handlers). En este caso a onblur y a onfocus.

  • Los eventos son acciones realizadas dentro de la ventana del navegador y que notifican los cambios en el entorno.
  • La propiedad onblur del mixin (combinación) GlobalEventHandlers es el manejador de eventos para procesar los eventos de desenfoque. Está disponible en Element, Document y Window.
  • La propiedad onfocus de GlobalEventHandlers es un manejador de eventos que procesa los eventos de enfoque en el elemento dado.

Pasemos al código

En este ejemplo, como buena práctica para facilitar la lectura, el código está dividido en dos archivos: index.html e index.js

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>😃 ¡Hola!</title>
</head>
<body>
  <div>Título actual: <span id="main"></span></div>
  <script src="index.js"></script>
</body>
</html>

La línea 9 del index.html es opcional, pero se ha añadido para hacer más visual el efecto.

// Establece el título original
const setOnFocusTitle = document.title;

// Establece el título alternativo
const setOnBlurTitle = '😭 ¡Adiós!';

// Obtiene acceso al elemento span con el id="main" del archivo index.html
const getSpanMain = document.querySelector('#main');

// Al quitar el foco de nuestra web
window.onblur = () => {
  document.title = setOnBlurTitle; // Cambia el título original por el título alternativo
  getSpanMain.innerHTML = setOnBlurTitle; // Imprime el título alternativo en pantalla
};

// Al devolver el foco a nuestra web
window.onfocus = () => {
  document.title = setOnFocusTitle; // Cambia el título alternativo por el título original
  getSpanMain.innerHTML = setOnFocusTitle; // Imprime el título original en pantalla
};

// Al cargar la página
window.onload = () => {
  getSpanMain.innerHTML = setOnFocusTitle; // Imprime el título original en pantalla
};

En el archivo JavaScript la declaración de la constante getSpanMain y su uso dentro de las funciones de flecha en los manejadores de eventos se pueden omitir. El código que se ejecuta al cargar la página con window.onload también es opcional.

Se han añadido para reforzar la visualización del cambio de título y que aparezca impreso en la página además de en la pestaña.

Espero que te haya gustado y si te ha sido de ayuda o tienes alguna duda, deja aquí abajo tu comentario 😉

Deja un comentario