如何在 TypeScript 中获取窗口历史记录?

typescriptweb developmentfront end technology

用户访问过的网页历史记录通过 `window.history` 对象表示。已加载页面的历史记录存储在一个名为 `history` 对象的数组中。`history` 对象仅提供有限的信息。由于无法确定当前 URL 在 `history` 对象中的位置，因此 `history` 对象只有少数属性和方法。

使用 `history.back()` 方法可以加载历史记录列表中的上一个 URL。`history` 的第二个方法是 `forward()` 方法，它会加载历史记录列表中的下一个 URL。这类似于点击浏览器中的"后退"按钮，也类似于点击浏览器的"前进"按钮。

您可以使用 `window.history` 对象在 TypeScript 中获取窗口历史记录。此对象包含当前窗口的历史记录，包括当前页面和之前访问过的任何页面。您可以使用 `back()`、`forward()` 和 `go()` 方法来浏览历史记录。

您还可以通过 length 属性访问历史记录，以获取历史记录列表中的条目数。

获取窗口历史记录的步骤

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

在 TypeScript 中，窗口历史记录是 window 对象的一个属性，可以通过 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!");
}

这段代码会检测用户何时导航到新页面，并在控制台中记录一条消息。

简而言之，窗口历史记录是一种允许用户在之前浏览过的网页之间前后移动的界面。它在 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` 的后退方法，`forward()` 方法触发 `Window History` 的前进方法。用户可以使用这两个方法导航到上一个和下一个 URL。我们使用了两个按钮，并通过点击事件来执行这两个方法。我们首先在文件中编写 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>