一篇文章帶你了解JavaScript Window History

作者：前端進階者 2021-04-30 09:44:30

開發前端

本文基于JavaScript基礎，介紹了如何通過window.history訪問 JavaScript瀏覽器對象，如何獲取對應網頁的頁數訪問網頁的上一頁，下一頁，訪問特定的頁面，都做了詳細的講解。通過用豐富的案例幫助大家更好理解。

[[397025]]

一、前言

window.history 對象可以不用窗口window前綴編寫。為了保護用戶的隱私,有限制的JavaScript可以訪問此對象。

history.back() - 與點擊瀏覽器中的back按鈕相同。

history.forward() - 與點擊瀏覽器中的forward按鈕相同。

二、history對象

window.history對象包含瀏覽器會話歷史記錄，在當前框架或窗口中訪問的所有頁面的列表，window.history可以編寫沒有窗口前綴的對象。

但是，為了保護用戶的隱私，JavaScript如何訪問此對象存在一些限制。window.history 對象包含瀏覽器歷史記錄。

三、獲取訪問的頁面數

該history.length屬性返回瀏覽器會話歷史記錄中當前窗口的頁面數，還包括當前加載的頁面。

例

var result = history.length; // 返回當前會話歷史記錄的大小

完整代碼：

<!DOCTYPE html> 
<html> 
<title>項目</title> 
 
<body style="background-color: aqua;"> 
 
<p>歷史記錄列表中的URL數:</p> 
 
<p id="para"></p> 
 
<p> <b>注意: 
     </b>本示例在新框架中打開，并將被視為新的"會話":</p> 
 
<script> 
var result = history.length; 
document.getElementById("para").innerHTML = result; 
</script> 
 
</body> 
</html>

可以使用此屬性來找出用戶在當前瀏覽器會話期間訪問了多少頁面。

1. 返回上一頁

該history.back()方法將歷史記錄列表中的上一個URL加載。

這與在瀏覽器中單擊“后退按鈕”相同。

<!DOCTYPE html> 
<html> 
<title>項目</title> 
 
<body style="background-color: aqua"> 
 
<button onclick="history.back();">Go Back</button> 
 
<p><b>Note:</b> 單擊此處的“后退”按鈕將不會執行任何操作，因為歷史記錄列表中沒有先前的URL</p> 
 
</body> 
</html>

上面的代碼將顯示以下輸出。

2. 前進到下一頁

該history.forward()方法將在歷史記錄列表中加載下一個URL。

這與在瀏覽器中單擊“轉發按鈕”相同。

<!DOCTYPE html> 
<html> 
<title>項目</title> 
 
<body style="background-color: aqua;"> 
 
<button onclick="history.forward();">前進</button> 
 
<p> <b>注意:</b>單擊此處的"前進"按鈕將不會執行任何操作，因為歷史記錄列表中沒有下一個URL:</p> 
 
</body> 
</html>

上面的代碼將顯示以下輸出(如果歷史記錄列表中不存在下一頁，則此示例將不起作用)：

3. 轉到特定頁面

可以使用history.go()方法從會話歷史記錄中加載特定頁面。

此方法將整數作為參數，負整數在歷史記錄中向后移動，正整數在歷史記錄中向后移動。

例

<!DOCTYPE html> 
<html> 
<title>項目</title> 
 
<body style="background-color: aqua;"> 
 
<button onclick="history.go(-2);">回退第2頁</button> 
 
<p> <b>注意:</b>單擊此處的"回退第2頁"按鈕將不會執行任何操作，因為歷史記錄列表中沒有先前的URL。</p> 
 
</body> 
</html>

上面的代碼將顯示以下輸出：

四、總結

希望大家可以根據文章的內容，積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

責任編輯：姜華來源：前端進階學習交流

JavaScript 前端 Window History