TypeScript 如何获取窗口历史记录

用户访问的网页历史记录通过window.history对象来表示。已加载的页面历史记录存储在一个称为history对象的数组中。history对象只提供有限的信息。因为无法知道当前URL在history对象中的位置，所以history对象只有几个属性和方法。

通过使用history.back()方法加载历史列表中的上一个URL。history的第二个方法是forward()方法，它加载历史列表中的下一个URL，类似于在浏览器中点击“后退”按钮。它与按下浏览器的前进按钮一样。

你可以通过使用window.history对象来获取TypeScript中的窗口历史。此对象包含当前窗口的历史记录，包括当前页面和之前访问过的任何页面。你可以使用back()，forward()和go()方法来浏览历史记录。你也可以通过length属性访问历史记录的条目数。

获取窗口历史的步骤

窗口历史是一种允许用户在以前访问过的网页之间向前和向后移动的接口类型。它在所有现代浏览器中都可用，并且是浏览器规范的一部分。

在TypeScript中，窗口历史作为窗口对象的一个属性可通过window.history来访问。它也可以通过document对象的document.history来访问。window.history对象存储用户在当前会话期间访问过的所有页面的URL。它还存储历史记录列表的长度，可以使用length属性访问。

history对象有几个与之关联的方法。back()方法将用户移动到历史列表中的上一页，而forward()方法将用户移动到下一页。go()方法可以通过在列表中提供位置参数来移动到特定页面。

还可以检测历史记录列表的变化。每当用户在历史列表中向前或向后移动时，将触发popstate事件，可以用它来检测用户是否已经转到新页面。可以通过将事件监听器附加到window.onpopstate事件来捕获此事件。

例如，如果用户导航到一个新页面，则popstate事件将触发，可以使用下面的代码来检测此事件 −

window.onpopstate = (event) => {
   console.log("The user has navigated to a new page!");
}

此代码将检测用户是否导航到新页面，并将一条消息记录到控制台。

总结起来，window history是一种接口，允许用户在先前浏览过的网页间前进和后退。它在TypeScript中以window.history对象的形式存在，并可用于访问用户访问过的页面的URL，以及检测历史列表中的变化。

我们需要将TypeScript代码编译为JavaScript代码，然后我们可以在我们的网页中使用这个JavaScript代码。

语法

let window_history = window.history;

这段代码片段使用window.history属性将窗口历史记录分配给一个名为window_history的变量。window.history属性包含当前窗口的会话历史记录，可以用于访问URL、将用户重定向到不同的页面并跟踪用户的导航。

示例

以下TypeScript示例使用一个网页来显示浏览器的历史记录。在这个例子中，我们创建了一个名为Window_History的类，其中包含back()和forward()方法。back()方法触发Window History back方法，forward()方法触发Window History forward方法。用户可以使用这两个方法导航到上一个和下一个URL。我们使用两个按钮来执行这两个方法，使用click事件。我们先在文件中编写Typescript代码，编译成JavaScript文件，然后在网页上使用JavaScript代码。

TypeScript文件

class Window_History {
   back() {
      return window.history.back()
   }
   forward() {
      return window.history.forward()
   }
}
window.onload = () => {
   var window_history_obj = new Window_History()

   var back_button = <HTMLButtonElement>document.getElementById('back-button')
   back_button.onclick = function () {
      window_history_obj.back()
   }

   var forward_button = <HTMLButtonElement>(
      document.getElementById('forward-button')
   )
   forward_button.onclick = function () {
      window_history_obj.forward()
   }
}

HTML文件

<html>
<body>
   <h2><i>Window History</i> in TypeScript</h2>
   <button id="back-button">Go Back</button>
   <button id="forward-button">Go Forward</button>
   <div id="root" style="border: 1px solid black; padding: 1%">
      Click on the above buttons to use Window History
   </div>
   <script>
      var Window_History = /** @class */ (function () {
         function Window_History() {}
         Window_History.prototype.back = function () {
            return window.history.back()
         }
         Window_History.prototype.forward = function () {
            return window.history.forward()
         }
         return Window_History
      })()
      window.onload = function () {
         var window_history_obj = new Window_History()
         var back_button = document.getElementById('back-button')
         back_button.onclick = function () {
            window_history_obj.back()
         }
         var forward_button = document.getElementById('forward-button')
         forward_button.onclick = function () {
            window_history_obj.forward()
         }
      }
   </script>
</body>
</html>