JavaScript - 历史对象

上一个

下一个

窗口历史对象

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

“history”对象是“window”对象的属性。history 属性可以访问或不访问其所有者对象，即 window 对象。

使用“history”对象的方法，您可以转到浏览器的会话的先前、后续或特定 URL。

历史对象方法

窗口历史对象提供了一些有用的方法，允许我们在历史列表中前后导航。

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

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

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

JavaScript 历史 back() 方法

JavaScript history back() 方法加载历史列表中的前一个 URL。

语法

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

history.back();

示例

在以下代码的输出中，您可以单击“后退”按钮以转到前一个 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 历史 forward() 方法

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

语法

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

history.forward();

示例

在以下代码中，单击按钮以转到下一个 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 历史 go() 方法

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

语法

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

history.go(count);

在上述语法中，“count”是一个数字值，表示您要访问哪个页面。

示例

在以下代码中，我们使用 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>

示例

在以下代码中，我们使用 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 对象仅包含“length”属性。

属性	描述
length	它返回对象的长度，表示对象中存在的 URL 数量。

历史对象方法列表

history 对象包含以下 3 种方法。

方法	描述
back()	它将带您到前一个网页。
forward()	它将带您到下一个网页。
go()	它可以带您到特定网页。

打印页面

上一个

下一个