Javascript 简明教程

JavaScript - History API

Web History API

在 JavaScript 中， history API 允许我们访问浏览器的历史记录。它可用于浏览历史记录。

JavaScript 历史记录 API 为我们提供了操作窗口历史记录对象的方法。历史记录对象是 JavaScript 窗口对象的属性。窗口历史记录对象包含当前会话中访问过的 URL 数组。

历史记录 API 是创建许多有用效果的非常强大的工具。例如，我们可以使用它来实现基于历史记录的撤消重做系统。

How to use JavaScript History API?

历史记录 API 是一个非常简单的 API。只需要了解几个方法和一个属性：

  1. back() - 此方法导航到历史记录中的上一页。

  2. forward() - 此方法导航到历史记录中的下一页。

  3. go() - 此方法导航到历史记录中的特定页面。传递给 go() 方法的数字是你想要导航到的页面的相对位置。例如，若要导航到历史记录中的上一页，你可以向 go() 方法传递 -1。

  4. length - 此属性返回历史记录列表的长度。它告诉我们用户访问过的页面数。

Syntax

以下是使用历史记录对象的不同方法和属性的语法：

// Load the previous URL in the history list
history.back();

// Load the next URL in the history list
history.forward();

// Load the page through its number
history.go(-2); // This will go to the previous 2nd page
history.go(2); // This will go to the next 2nd page

// Get the length of the history list
const length = history.length;

Loading Previous Page in History List

历史对象中的 JavaScript history back() 方法加载历史列表中的前一个 URL。我们还可以使用 history go() 方法加载前一页。这两种方法之间的区别在于，back() 方法只会加载历史列表中的前一个 URL，但我们可以使用 go() 方法加载历史列表中的任何前一个 URL。

Example: Using back() method to load previous page

在下例中，我们使用了 history back() 方法加载用户已访问的前一页。

请注意，如果您在历史列表中没有前一页（即您之前未访问过任何页面），则 back() 方法将不起作用。

我们实现了一个后退按钮，单击该按钮后，我们可以加载以前访问过的页面。

<html>
<body>
    <p> Click "Load Previous Page" button to load previous visited page </p>
    <button onclick="goback()"> Load Previous Page </button>
    <p id = "output"> </p>
    <script>
        function goback() {
            history.back();
            document.getElementById("output").innerHTML +=
            "You will have gone to previous visited page if it exists";
        }
    </script>
</body>
</html>

Example: Using go() method to load the previous page

在下例中，我们使用了 history go() 方法从当前网页加载第 2 个以前访问过的页面。

<html>
<body>
   <p> Click the below button to load 2nd previous visited page</p>
   <button onclick = "moveTo()"> Load 2nd Previous Page </button>
   <p id = "output"> </p>
   <script>
      function moveTo() {
         history.go(-2);
         document.getElementById("output").innerHTML =
         "You will have forwarded to 2nd previous visited page if it exists.";
      }
   </script>
</body>
</html>

Loading Next Page in History List

历史对象中的 JavaScript history forward() 方法加载历史列表中的下一个 URL。我们还可以使用 history go() 方法加载下一页。这两种方法之间的区别在于，forward() 方法只会加载历史列表中的下一个 URL，但我们可以使用 go() 方法加载历史列表中的任何下一个 URL。

Example: Using forward() method to load next page

在下面的代码中，单击按钮转到下一个URL。它的工作原理与浏览器的前进按钮相同。

<html>
<body>
   <p> Click "Load Next Page" button to load next visited page</p>
   <button onclick = "goForward()"> Load Next Page </button>
   <p id = "output"> </p>
   <script>
      function goForward() {
         history.forward();
         document.getElementById("output").innerHTML =
         "You will have forwarded to next visited page if it exists."
      }
   </script>
</body>
</html>

Example: Using go() method to load next page

在下例中，我们使用了 go() 方法从当前网页移动到第 2 个前一页。

<html>
<body>
   <p> Click the below button to load  next 2nd visited page</p>
   <button onclick = "moveTo()"> Load 2nd Next Page </button>
   <p id = "output"> </p>
   <script>
      function moveTo() {
         history.go(2);
         document.getElementById("output").innerHTML =
         "You will have forwarded to 2nd next visited page if it exists.";
      }
   </script>
</body>
</html>

Get the length of the history list

我们可以使用 history.length 属性获取历史记录列表的长度。

Example

尝试以下示例 −

<html>
<body>
   <p> Click the below button to get the lenght of history list</p>
   <button onclick = "moveTo()"> Get Lenght of History List </button>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      function moveTo() {
         output.innerHTML = history.length;
      }
    </script>
</body>
</html>