Javascript 简明教程

JavaScript - History API

Web History API

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

In JavaScript, the history API allows us to access the browser’s history. It can be used to navigate through the history.

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

JavaScript History API provides us with methods to manipulate window history object. History object is a property of JavaScript window object. The window history object contains the array of visited URLs in the current session

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

The history API is very powerful tool to create may useful effects. For example, we can use it to implement history based undo redo system.

How to use JavaScript History API?

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

The History API is a very simple API to use. There are just a few methods and a property that you need to know about:

  1. back() − This method navigates back to the previous page in the history.

  2. forward() − This method navigates forward to the next page in the history.

  3. go() − This method navigates to a specific page in the history. The number that you pass to the go() method is the relative position of the page that you want to navigate to. For example, to navigate to the previous page in the history, you would pass -1 to the go() method.

  4. length − This property returns the length of the history list. It tells us the number of pages that have been visited by the user.

Syntax

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

Followings are the syntaxes to use the different methods and property of the history object −

// 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。

The JavaScript history back() method of the history object loads the previous URL in the history list. We can also use the history go() method to load the previous page. The difference between these two methods is that back() method only load the immediate previous URL in history list but we can use the go() method to load any previous URL in the history list.

Example: Using back() method to load previous page

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

In the example below, we have used history back() method to load the previous page the user has already visited.

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

Please note that if you have no previous page in the history list (i.e., you have not visited any page previously), the back() method will not work.

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

We have implemented a back button, on clicking that we can load the previous visited page.

<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 个以前访问过的页面。

In the example bellow, we have used the history go() method to load to the 2nd previous visited page from the current web page.

<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。

The JavaScript history forward() method of the history object loads the next URL in the history list. We can also use the history go() method to load the next page. The difference between these two methods is that forward() method only loads the immediate next URL in history list but we can use the go() method to load any next URL in the history list.

Example: Using forward() method to load next page

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

In the below code, click the button to go to the next URL. It works as the forward button of the browser.

<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 个前一页。

In the example below, we have used the go() method to move to the 2nd previous page from the current web page.

<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 属性获取历史记录列表的长度。

We can use the history.length proerty to get the length of history list.

Example

尝试以下示例 −

Try the follwing 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>