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

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

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

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

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

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

  • history.forward() 方法

  • history.go() 方法

使用history.forward() 方法

history.forward() 方法用于加载用户之前访问过的下一页。

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

使用此方法与单击浏览器中的 forward 按钮相同。

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

. 
window.history.forward();
OR
history.forward();

示例 1

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

<html>
<body>
   <h3> Load next page in the history list using the <i> history.forward() </i> method</h3>
   <button onclick="goForward()">go forward</button>
   <p id="output"> </p>
   <script>
      function goForward() {
         window.history.forward();
         document.getElementById("output").innerHTML = "You will have forwarded to next page if it exists";
      }
   </script>
</body>
</html>

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

您可以单击此页面上的任何链接，返回并运行程序以检查 history.forward() 方法的工作原理。

使用history.go() 方法

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

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

window.history.go(page_number)
OR
history.go(page_number)

此处，page_number 是浏览器历史列表中页面的页面编号。

要使用history.go() 方法转到下一页，我们可以将 1 作为参数page_number 传递。请参阅以下语法：

window.history.go(1)
OR
history.go(1)

示例 2

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

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

在本教程中，我们学习了两种方法，可以使用它们在 JavaScript 中加载历史列表中的下一页。在这些方法中，history.forward() 是 history 对象中加载历史列表中的下一页的方法。history.go() 是 history 对象中加载下一页的方法，同时添加“1”作为参数。

更新于：2022 年 9 月 14 日

666 次浏览

启动您的 职业生涯

通过完成课程获得认证

开始
广告