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

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

使用 `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()` 方法触发窗口历史记录后退方法，`forward()` 方法触发窗口历史记录前进方法。用户可以使用这两个方法导航到上一个和下一个 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文件

Open Compiler
<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>

输出

点击“后退”后。

点击“前进”后。

更新于：2023年8月21日

677 次浏览

启动你的职业生涯

完成课程后获得认证

开始
广告