El otro día estaba en una página de noticias leyendo un artículo. Dejé de leerlo y navegué a otra pestaña, pero al cambiar de pestaña el título fue cambiado a “Hey, vuelve aquí” o algo así. Entonces me pregunté cómo se puede cambiar título de página cuando el usuario cambia de pestaña.
Buscando por internet, y pensando un poco, me di cuenta de que se puede hacer con JavaScript en pocas líneas.
Sin importar que nuestra página esté renderizada con PHP, o simplemente sea HTML sin preprocesamiento, tenemos que incluir una etiqueta script.
Dentro del script escribimos lo siguiente:
var tituloOriginal = document.title; // Lo guardamos para restablecerlo
window.onblur = function(){ // Si el usuario se va a otro lado...
document.title = "Hey, vuelve aquí";// Cambiamos el título
}
window.onfocus = function(){
document.title = tituloOriginal; // Si el usuario vuelve restablecemos el título
}
Aquí dejo el código completo de un archivo HTML. Si quieres probar, copia y pega, guárdalo con extensión .html y ábrelo en el navegador.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de cambio de título</title>
<script>
var tituloOriginal = document.title; // Lo guardamos para restablecerlo más tarde
window.onblur = function(){ // Si el usuario se va a otro lado...
document.title = "Hey, vuelve aquí";// Cambiamos el título
}
window.onfocus = function(){
document.title = tituloOriginal; // Si el usuario vuelve restablecemos el título
}
</script>
</head>
<body>
<h1>Si te vas a otra pestaña, el título cambia</h1>
<a href="https://parzibyte.me/blog">parzibyte.me/blog</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio nihil facilis natus earum repellat libero saepe, quasi amet cupiditate tenetur molestias error pariatur, quisquam velit odit suscipit quos accusantium et.
</p>
</body>
</html>
Listo, con ese pequeño código de JavaScript podemos alcanzar ese resultado de una manera muy fácil y rápida.
Cuando estamos dentro de la página, se ve así (dice Ejemplo de cambio de título):
Pero cuando navego a otra pestaña o cambio de aplicación, se ve así (dice Hey, vuelve aquí):
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.