JavaScript 如何使用history API在网页之间导航

在本文中，我们将看看如何使用历史API在页面之间进行导航。我们使用历史API来在网页之间进行编程导航。

历史API提供了一种访问浏览器会话历史的方式。它公开了有用的方法和属性，可以让您通过用户的历史记录前进和后退，并操作历史堆栈的内容。

历史API中的方法：

1. window.history.back： 这与点击浏览器的后退按钮相同。

语法：

window.history.back()

2. window.history.forward: 这与点击前进按钮相同。

语法：

window.history.forward()

3. window.history.go: 可以用于跳转到通过数字指定的另一个页面。当前页面由数字0表示。因此，负数表示之前的任意页面，正数表示之后的页面。

语法:

window.history.go(number)

示例 1： 现在，让我们实现上面给出的方法以在页面之间进行导航。我们有两个HTML文件，我们可以使用前进和后退的方法在这些文件之间进行切换。

创建两个文件，分别命名为base.html和app.html，并粘贴以下代码
点击首先的链接
点击按钮进行导航

base.html

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>NAVIGATION</title> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        From GEEKS FOR GEEKS to HELLO WORLD 
    </h1> 
    <a href="file:///E:/codes/app.htm">link 1</a> 
    <button onclick="window.history.forward()"> 
        FORWORD 
      </button> 
</body> 
  
</html>

app.html

HTML

app.html

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>NAVIGATION</title> 
</head> 
  
<body> 
    <h1 style="padding:10px;color:blue"> 
        From HELLO WORLD to GEEKS FOR GEEKS 
    </h1> 
    <button onclick="window.history.back()"> 
      BACK</button> 
</body> 
  
</html>

输出：

JavaScript 如何使用history API在网页之间导航

示例2： 让我们使用上面的相同示例来实现go()方法：

创建两个文件，名字分别为base.html和app.html，并粘贴下面的代码
首先点击链接
点击“返回”按钮以返回页面

base.html

HTML

<html> 
<head> 
    <title>NAVIGATION</title> 
</head> 
<body> 
    <h1 style="color:green"> 
        From GEEKS FOR GEEKS to HELLO WORLD 
    </h1> 
    <a href="file:///E:/codes/app.htm">link 1</a> 
</body> 
</html>

app.html

HTML

app.html

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>NAVIGATION</title> 
</head> 
<body> 
    <h1 style="padding:10px;color:blue"> 
        From HELLO WORLD to GEEKS FOR GEEKS 
    </h1> 
    <button onclick="window.history.go(-1)">GO(-1)</button> 
</body> 
</html>

输出:

JavaScript 如何使用history API在网页之间导航