資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在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檔案
<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>
輸出
點選“後退”後。
點選“前進”後。
677 次瀏覽
