如何使用JavaScript使浏览器回到上一页

如何使用JavaScript使浏览器回到上一页

有两种常用方法可以通过点击JavaScript事件使浏览器返回上一页,具体方法如下:

方法1:使用history.go()方法

窗口历史对象的go()方法用于从会话历史中加载页面。可以通过delta参数的值向前或向后移动。正数的delta参数意味着页面将向前移动历史记录,负数的delta值会使页面返回上一页。

可以使用’-1’作为delta值来返回历史中的一页。可以使用onclick事件指定该方法来返回历史中的一页。

语法:

window.history.go(-1)

注意: 如果我们想回退多个步骤,则将delta的值从“-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> 
<!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> 

输出:

  • 点击链接之前:

如何使用JavaScript使浏览器回到上一页

  • 点击链接之后:

如何使用JavaScript使浏览器回到上一页

  • 点击按钮之后:

如何使用JavaScript使浏览器回到上一页

方法2:使用history.back()方法

window.history对象的back()方法用于在当前会话历史记录中返回到上一页。如果没有上一页,此方法调用无效。

可以使用此方法指定onclick事件以返回历史记录中的一页。

语法:

window.history.back()

示例:

<!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> 
<!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> 

输出:

  • 在点击链接之前:

如何使用JavaScript使浏览器回到上一页

  • 在点击链接之后

如何使用JavaScript使浏览器回到上一页

  • 在点击按钮之后

如何使用JavaScript使浏览器回到上一页

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程