Javascript 简明教程

JavaScript - History Object

Window History Object

在JavaScript中,窗口“history”对象包含有关浏览器会话记录的信息。它包含当前会话中访问过的URL的数组。

“history”对象是“window”对象的一个属性。可以访问history属性,无需引用它的所有者对象,即window对象。

使用“history”对象的method,可以转到浏览器的会话的先前、后继或特定URL。

History Object Methods

窗口history对象提供了有用的method,允许我们来回浏览历史记录列表。

按照以下语法在JavaScript中使用“history”对象。

window.history.methodName();
OR
history.methodName();

您可以使用“window”对象访问“history”对象。

JavaScript History back() Method

history对象的JavaScript back()方法加载历史记录列表中的先前URL。

Syntax

按照以下语法使用history back()方法。

history.back();

Example

在下面的代码输出中,您可以单击“后退”按钮转到上一个URL。它的工作原理与浏览器的后退按钮相同。

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

JavaScript History forward() Method

history对象的forward()方法将您带到下一个URL。

Syntax

按照以下语法使用forward()方法。

history.forward();

Example

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

<html>
<body>
   <p> Click "Go Forward" button to load next URL</p>
   <button onclick = "goforward()"> Go Forward </button>
   <p id = "output"> </p>
   <script>
      function goforward() {
         history.forward();
         document.getElementById("output").innerHTML =
		 "You will have forwarded to next URL if it exists."
     }
   </script>
</body>
</html>

JavaScript History go() Method

history对象的go()方法将您带到浏览器的会话的特定URL。

Syntax

按照以下语法使用go()方法。

history.go(count);

在上述语法中,“计数”是一个数字值,表示您想要访问哪一页。

Example

在下面的代码中,我们使用go()方法从当前网页移动到上两个网页。

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

Example

在下面的代码中,我们使用go()方法从当前网页移动到上两个网页。

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

以下是完整的窗口历史对象参考,包括属性和方法

History Object Property List

历史对象仅包含“length”属性。

Property

Description

length

它返回对象的长度,代表对象中存在的 URL 的数量。

History Object Methods List

历史对象包含以下 3 种方法。

Method

Description

back()

它将您带到上一个网页。

forward()

它将您带到下一个网页。

go()

它可以将您带到特定网页。