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í):
El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…
En este post te voy a enseñar a designar una carpeta para imprimir todos los…
En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…
Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…
Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…
Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…
Esta web usa cookies.