如何使用JavaScript历史记录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

<!DOCTYPE html>
<html>
  
<head>
    <title>导航</title>
</head>
  
<body>
    <h1 style="color:green">
        从GEEKS FOR GEEKS到HELLO WORLD
    </h1>
    <a href="file:///E:/codes/app.htm">link 1</a>
    <button onclick="window.history.forward()">
        前进
      </button>
</body>
  
</html>

app.html

<!DOCTYPE html>
<html>
  
<head>
    <title>导航</title>
</head>
  
<body>
    <h1 style="padding:10px;color:blue">
        从HELLO WORLD到GEEKS FOR GEEKS
    </h1>
    <button onclick="window.history.back()">
      返回</button>
</body>
  
</html>

输出：

如何使用JavaScript历史记录API在网页之间导航

示例2： 让我们在上面的示例中实现go()方法：

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

base.html

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

app.html

<html>
<head>
    <title>导航</title>
</head>
<body>
    <h1 style="color:blue">
        从HELLO WORLD到GEEKS FOR GEEKS
    </h1>
    <button onclick="window.history.go(-1)">
      返回</button>
</body>
</html>

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

输出:

如何使用JavaScript历史记录API在网页之间导航