如何在 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日

667 次查看

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告