¿Cómo hacer que el navegador regrese a la página anterior usando JavaScript?

Hay dos formas populares de hacer que los navegadores regresen a la página anterior haciendo clic en el evento de JavaScript, ambos métodos se describen a continuación:

Método 1: Usar el método history.go(): El método go() del objeto window.history se usa para cargar una página desde el historial de la sesión. Se puede utilizar para avanzar o retroceder utilizando el valor del parámetro delta. Un parámetro delta positivo significa que la página avanzaría en el historial. De manera similar, un valor delta negativo haría que la página volviera a la página anterior.
Este método se puede utilizar con ‘-1’ como valor delta para retroceder una página en el historial. El evento onclick se puede especificar con el método para retroceder una página en el historial.

Sintaxis:

window.history.go(-1)

Nota: si queremos retroceder más de un paso, aumente el valor de delta de ‘-1’ tanto como desee.

Ejemplo:

Page 1

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to make browser to go back to
        previous page using JavaScript ?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Onclick javascript to make browser
        go back to previous page?
    </b>
      
    <h2>Page 1</h2>
      
    <p>
        Click on the link to get
        to the second page.
    </p>
      
    <a href="page2.html">Go to Page 2</a>
</body>
  
</html>

Page 2

<!DOCTYPE html>
<html>
  
<head>
     <title>
        How to make browser to go back to
        previous page using JavaScript ?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Onclick javascript to make browser
        go back to previous page?
    </b>
      
    <h2>Page 2</h2>
      
    <p>
        Click on the button to go back
        to the previous page.
    </p>
      
    <button onclick="history.go(-1)">
        Click here to go back
    </button>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el enlace:
    ex1-page-1
  • Después de hacer clic en el enlace:
    ex1-page-2
  • Después de hacer clic en el botón:
    ex1-page-1

Método 2: Usar el método history.back(): El método back() del objeto window.history se usa para volver a la página anterior en el historial de la sesión actual. En caso de que no haya una página anterior, esta llamada al método no hace nada.
El evento onclick se puede especificar con este método para retroceder una página en el historial.

Sintaxis:

window.history.back()

Ejemplo:

Page 1

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Onclick javascript to make browser go
        back to previous page?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Onclick javascript to make browser
        go back to previous page?
     </b>
       
    <h2>Page 1</h2>
      
    <p>
        Click on the link to get
        to the second page.
    </p>
      
    <a href="page2.html">Go to Page 2</a>
</body>
  
</html>

Page 2

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Onclick javascript to make browser
        go back to previous page?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Onclick javascript to make browser 
        go back to previous page?
    </b>
      
    <h2>Page 2</h2>
      
    <p>
        Click on the button to go
        back to the previous page.
    </p>
      
    <button onclick="history.back()">
        Click here to go back
    </button>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el enlace:
    ex2-page-1
  • Después de hacer clic en el enlace:
    ex2-page-2
  • Después de hacer clic en el botón:
    ex2-page-1

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *