> Faqs > Cómo cambiar la URL del botón "back" del navegador (La página anterior lleve a otro lugar)

Cómo cambiar la URL del botón "back" del navegador (La página anterior lleve a otro lugar)

Soy desarrollador web y quería realizaros una consulta. A ver si es posible.

Me ha comentado una persona que cuando busca desde google una noticia (página interna) de alguna web en concreto, pulsa sobre su enlace desde el buscador de google, y lo curioso es que cuando se da al botón de volver del navegador desde esa página interna no se regresa al buscador de google, sino a la HOME de esa web en concreto. Es muy interesante porque retiene tráfico de la página principal. Pero, ¿Es posible?. Si es así ¿cómo se podría hacer?.

A la espera de novedades, muchas gracias!!!

Respuestas

Teóricamente este comportamiento lo tienes que hacer así:

window.addEventListener('popstate', function (e) {
  window.location.assign("http://127.0.0.1:8080");
});

Este evento "popstate" sirve para detectar el cambio en el historial de la página, por ejemplo pulsando el botón back. En el momento que lo detectas, le envías al navegador a otra dirección que puedes personalizar. Para tu caso tendrás que sustituir, lógicamente, http://127.0.0.1:8080 por la URL a la que quieras llevar al usuario.

Sin embargo, este script no hará nada si el usuario no ha interaccionado con algún formulario de la página. Si el usuario no ha hecho alguna entrada de datos en algún lugar, el navegador simplemente ignora ese evento que as definido y no permite hacer esa navegación. Supongo que es una protección para que los desarrolladores no hagan cosas como lo que quieres hacer tú, sin un motivo aparente.

Entonces lo que puedes hacer es tener un campo de formulario por ahí, aunque lo hayas ocultado con CSS:

<form action="submit.php" style="display: none;">
  <textarea name="dato" id="dato" cols="30" rows="10"></textarea>
  <button>enviar</button>
</form>

Este campo tiene un textarea, que luego tendrás que llenar. Para llenarlo sin que el usuario lo tenga que hacer manualmente puedes crear un manejador de evento click sobre el documento.

document.addEventListener('click', function () {
    document.getElementById('dato').value = "esto es un dato que voy a introducor con JS"
});

Así, cuando el usuario haga clic en cualquier parte de la página, se introducirá una cantidad de texto en el campo del formulario. Aquí ojo que tienes que colocar una cantidad de caracteres suficiente para que el navegador lo considere y te permita hacer el evento "popstate", porque si es poco texto lo despreciará.

Entonces en el momento que el usuario intente ir hacia atrás con el botón back del navegador, tu evento "popstate" se ejecutará, enviando al usuario a cualquier URL personalizada que le hayas colocado.

A mi así me ha funcionado y en mi esquema de páginas de prueba estoy consiguiendo que al pulsar el botón de atrás se vaya a una URL diferente a la que estaba predeterminada por el propio historial.

Camila
680 29 46 6
Muchas gracias por la información. Me la archivo. De momento, nos hemos dado cuenta de que puede perjudicar la experiencia del usuario, por lo que lo valoramos, si implementarlo o no, más adelante.

Estaría bien saber en qué página lo has visto para ver cómo lo han hecho ellos. Igual tiene programación del lado del servidor... enviando al index de la web y luego desde el index retornando a la noticia, sin que el usuario lo note... para que se rellenen las URL en el historial del navegador, en cuyo caso no sería posible ver el código. Pero si lo han hecho con Javascript en principio podrías saber cómo analizando su código.

En cualquier caso, si es con Javascript se debería hacer con el API del historial del navegador. Te recomiendo que leas la documentación completa en la MDN sobre Hystory_API, donde encontrarás métodos que te permitan trabajar y manipular el historial.

Ahora bien, esto es alterar la funcionalidad esperada del navegador y la experiencia de usuario como que no sería la más adecuada.

Luis
174 5 6 3
Muchas gracias!!!. Sí la verdad es que alterar la funcionalidad esperada del navegador no es muy buena práctica, si además tenemos en cuenta que puede perjudicar la experiencia del usuario, de momento no lo implementamos.