如何在JavaScript中加载历史列表中的上一个URL？

在本教程中，我们将学习如何在JavaScript中加载历史列表中的上一页。

JavaScript中的Window对象访问浏览器中的窗口。此对象包含执行任务所需的许多属性和方法。Window对象还可以从浏览器窗口检索信息。

每个浏览器中都有一个历史堆栈，用于保存用户访问的页面。要访问此历史记录堆栈，我们可以使用history对象，它是Window对象的属性。通过访问浏览器的历史记录，我们可以访问用户访问的上一页或下一页。

让我们来看一下如何在JavaScript中加载历史列表中的上一页。

以下是history对象中用于在JavaScript中加载历史列表中的上一页的方法/函数：

  • history.back() 方法

  • history.go() 方法

使用history.back() 方法

history.back() 用于加载用户访问的上一页。

但是，只有当上一页存在于浏览器中的历史堆栈中时，它才有效。

此方法类似于点击浏览器中的后退按钮。

用户可以按照以下语法使用history对象的back()方法来加载历史列表中的上一页。

window.history.back();
   OR
history.back();

示例1

在下面提到的示例中，我们使用了back()方法来加载浏览器历史列表中的上一页。

<html>
<body>
   <h3>Use <i>history.back()</i> to load the previous page in the history list</h3>
   <button onclick = "goback()">go back</button>
   <p id = "output"> </p>
   <script>
      function goback(){
         window.history.back();
         document.getElementById("output").innerHTML = "You will have gone to previous page if it exists";
      }
   </script>
</body>
</html>

在上面的示例中，用户可以看到我们点击按钮后使用了back方法。但是，只有当页面存在于浏览器历史堆栈中时，页面才能导航到上一页。

使用history.go() 方法

history.go()方法用于通过页码加载页面。我们必须将其页码作为参数提供给历史记录中的页面。页码可以是负数或正数，取决于它是前进页面还是后退页面。

所有用户都可以按照以下语法使用history对象的go()方法来加载历史列表中的上一页：

语法

//We have to use negative values for previous pages
window.history.go(-page_number)
    OR
history.go(-page_number)

参数

  • page_number − 浏览器历史列表中页面的页码。

示例

在下面的示例中，我们使用了go()方法来加载浏览器历史列表中的上一页。

<html>
<body>
   <h3>Use <i>history.go()</i> to load the previous page in the history list</h3>
   <button onclick = "go()">go</button>
   <p id = "output"> </p>
   <script>
      function go(){
         window.history.go(-1);
         document.getElementById("output").innerHTML = "You will have gone to previous page if it exists";
      }
   </script>
</body>
</html>

在本教程中，我们学习了两种在JavaScript中加载历史列表中上一页的方法。在这两种方法中，history.back()是history对象中加载历史列表中上一页的方法。history.go()是history对象中的方法，它在添加负一作为参数的同时加载上一页。

更新于：2022年9月14日

6000+ 次查看

启动你的职业生涯

完成课程获得认证

开始学习
广告