¿Cómo hacer un enlace de retroceso HTML?


286

¿Cuál es la forma más sencilla de crear una <a>etiqueta que enlace a la página web anterior? Básicamente un botón de retroceso simulado, pero un hipervínculo real. Solo tecnologías del lado del cliente, por favor.

Editar
Busque soluciones que tengan el beneficio de mostrar la URL de la página en la que está a punto de hacer clic cuando se desplaza, como un hipervínculo estático normal. Prefiero no tener al usuario mirando history.go(-1)al pasar el mouse sobre un hipervínculo. Lo mejor que he encontrado hasta ahora es:

<script>
  document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

Es document.referrerconfiable? Cross-browser seguro? Estaré encantado de aceptar una mejor respuesta.


2
JavaScript es una tecnología del lado del cliente, algunos clientes (como yo) simplemente eligen deshabilitarla (por defecto). Ese es el poder del cliente! : D Pero sí, no hay forma de que HTML por sí solo determine cuál era la página anterior.
animuson

Respuestas:


513

Y de otra manera:

<a href="javascript:history.back()">Go Back</a>


9
Y para un botón:<button type="button" onclick="javascript:history.back()">Back</button>
Leo

1
Una desventaja de este enfoque es que las funciones estándar del navegador, como "desplazar el mouse para ver la URL" y hacer clic con el botón derecho -> copiar enlace se romperán.
Vivek Maharajh

Creo que se trata más de semántica. Un "botón" de retroceso es más adecuado que un "enlace" de retroceso. Ambas opciones son geniales y ambas son correctas a su manera.
Jaspreet Singh

111

Esta solución tiene el beneficio de mostrar la URL de la página enlazada al pasar el mouse, como la mayoría de los navegadores lo hacen de manera predeterminada, en lugar de history.go(-1)o similar:

<script>
    document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

9
Esto también tiene la ventaja de cubrir el caso de que la página de referencia se abrió con un target="_blank"atributo en el enlace, que history.go(-1)no lo hace.
Chris Krycho

44
Esta solución pierde la parte del enlace después de #, el 'javascript: history.back ()' funciona correctamente.
Liviu

16
La desventaja de esta solución es que no podrá volver más de una página. Ejemplo; navegue a las páginas a, b, c, d: presione el botón Atrás repetidamente c, d, c, d, c, d. Compare esto con .history.back () a, b, c, d presione el botón de retroceso repetidamente d, c, b, a
atreeon

¿Cómo puedo hacerlo para que en caso de que no haya una página posterior, luego redirigir a una URL fijahistory.back() || "myaction/mycontroller"
Anidar

@orangesherbert He abordado esto en una nueva respuesta (que también cumple con el requisito de "mostrar URL".
Vivek Maharajh

44

La forma más fácil es usar history.go(-1);

Prueba esto:

<a href="#" onclick="history.go(-1)">Go Back</a>


41

puedes probar javascript

<A HREF="javascript:history.go(-1)">

consulte JavaScript Botón Atrás

EDITAR

para mostrar la URL de referencia http://www.javascriptkit.com/javatutors/crossmenu2.shtml

y envíe el elemento a en onmouseover de la siguiente manera

function showtext(thetext) {
  if (!document.getElementById)
    return
  textcontainerobj = document.getElementById("tabledescription")
  browserdetect = textcontainerobj.filters ? "ie" : typeof textcontainerobj.style.MozOpacity == "string" ? "mozilla" : ""
  instantset(baseopacity)
  document.getElementById("tabledescription").innerHTML = thetext.href
  highlighting = setInterval("gradualfade(textcontainerobj)", 50)
}
 <a href="http://www.javascriptkit.com" onMouseover="showtext(this)" onMouseout="hidetext()">JavaScript Kit</a>

comprobar jsfiddle


¿Puedes explicar esa última edición? Solo quiero un enlace normal como se muestra en la parte inferior de la mayoría de los navegadores.
paislee

como todos los navegadores muestran para todos para eso, no necesita hacer nada, pero si desea mostrarlo en su propio div puede especificar un div tabledescriptionen cualquier lugar de una página para mostrar un enlace al pasar el mouse sobre la etiqueta de anclaje
Hemant Metalia

40

Esta solución te ofrece lo mejor de ambos mundos.

  • Los usuarios pueden desplazarse sobre el enlace para ver la URL
  • Los usuarios no terminan con una pila corrupta

Más detalles en los comentarios del código a continuación.

var element = document.getElementById('back-link');

// Provide a standard href to facilitate standard browser features such as 
//  - Hover to see link
//  - Right click and copy link
//  - Right click and open in new tab
element.setAttribute('href', document.referrer);

// We can't let the browser use the above href for navigation. If it does, 
// the browser will think that it is a regular link, and place the current 
// page on the browser history, so that if the user clicks "back" again,
// it'll actually return to this page. We need to perform a native back to
// integrate properly into the browser's history behavior
element.onclick = function() {
  history.back();
  return false;
}
<a id="back-link">back</a>


Impresionante respuesta. Lo uso en casi todos mis proyectos eliminados en el contexto del enlace personalizado.
pimbrouwers

¡Gran respuesta! Tuve que agregar return false;a la función onclick en Chrome para evitar que agregue la página actual al historial del navegador.
Marshall Morrise

25

Para volver a la página anterior usando Anchor Tag <a>, a continuación hay 2 métodos de trabajo y de ellos, el primero es más rápido y tiene una gran ventaja al volver a la página anterior.

He intentado ambos métodos.

1)

<a href="#" onclick="location.href = document.referrer; return false;">Go Back</a>

El método anterior (1) funciona muy bien si ha hecho clic en un enlace y ha abierto un enlace en una pestaña nueva en la ventana del navegador actual.

2)

<a href="javascript:history.back()">Go Back</a>

El método anterior (2) solo funciona bien si ha hecho clic en un enlace y ha abierto un enlace en una pestaña Actual en la ventana del navegador actual.

No funcionará si tiene un enlace abierto en Nueva pestaña. Aquí history.back()no funcionará si se abre el enlace en la Nueva pestaña del navegador web.


18

Un enlace hacia atrás es un enlace que mueve el navegador hacia atrás una página, como si el usuario hubiera hecho clic en el botón Atrás disponible en la mayoría de los navegadores. Los enlaces posteriores usan JavaScript. Mueve el navegador una página hacia atrás si su navegador admite JavaScript (lo que hace) y si admite el window.historyobjeto, lo cual es necesario para los vínculos de retroceso.

Formas simples son

<a href="#" onClick="history.go(-1)">Go Back</a>

O:

function goBack() {
  window.history.back()
}
<a href="#" onclick="goBack()" />Go Back</a>

En general, no es necesario un enlace de retroceso ... el botón Atrás suele ser bastante bueno, y generalmente también puede simplemente enlazar a la página anterior de su sitio. Sin embargo, a veces es posible que desee proporcionar un enlace de regreso a una de varias páginas "anteriores", y ahí es donde un enlace de regreso es útil. Así que te remito a continuación el tutorial si quieres hacerlo de manera más avanzada:

http://www.htmlcodetutorial.com/linking/linking_famsupp_108.html


2
A diferencia de la solución más votada, esto mantiene la posición de desplazamiento que tenía el usuario.
Ketri

@Ketri, ¿puede brindar apoyo para la declaración? deberían ser idénticos: w3schools.com/jsref/met_his_back.asp
FarO

8

prueba esto

<a href="javascript:history.go(-1)"> Go Back </a>


1

También puede usar al history.back()costado document.write()para mostrar el enlace solo cuando realmente haya algún lugar al que volver:

<script>
  if (history.length > 1) {
    document.write('<a href="javascript:history.back()">Go back</a>');
  }
</script>

document.writesobrescribe todo en la página. ¿Por qué usarías eso?
jpaugh

Debe ejecutar este script mientras la página aún se está cargando.
Leonid Vasilev

0

La mejor manera de usar un botón es

<input type= 'button' onclick='javascript:history.back();return false;' value='Back'>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.