一篇文章帶你了解JavaScript Window History
回復(fù)“ 前端 ”即可獲贈前端相關(guān)學(xué)習(xí)資料
今
日
雞
湯
孤帆遠影碧空盡，唯見長江天際流。一、前言
window.history 對象可以不用窗口window前綴編寫。為了保護用戶的隱私,有限制的JavaScript可以訪問此對象。
history.back() - 與點擊瀏覽器中的back按鈕相同。
history.forward() - 與點擊瀏覽器中的forward按鈕相同。
二、history對象
window.history對象包含瀏覽器會話歷史記錄，在當(dāng)前框架或窗口中訪問的所有頁面的列表，window.history可以編寫沒有窗口前綴的對象。
但是，為了保護用戶的隱私，JavaScript如何訪問此對象存在一些限制。window.history 對象包含瀏覽器歷史記錄。
三、獲取訪問的頁面數(shù)
該history.length屬性返回瀏覽器會話歷史記錄中當(dāng)前窗口的頁面數(shù)，還包括當(dāng)前加載的頁面。
例
var result = history.length; // 返回當(dāng)前會話歷史記錄的大小
完整代碼：
<html><title>項目</title>
<body style="background-color: aqua;">
<p>歷史記錄列表中的URL數(shù):</p>
<p id="para"> </p>
<p> <b>注意:</b>本示例在新框架中打開，并將被視為新的"會話":</p>
<script>var result = history.length;document.getElementById("para").innerHTML = result;</script>
</body></html>
可以使用此屬性來找出用戶在當(dāng)前瀏覽器會話期間訪問了多少頁面。
1. 返回上一頁
該history.back()方法將歷史記錄列表中的上一個URL加載。
這與在瀏覽器中單擊“后退按鈕”相同。
<html><title>項目</title>
<body style="background-color: aqua">
<button onclick="history.back();">Go Back</button>
<p><b>Note:</b> 單擊此處的“后退”按鈕將不會執(zhí)行任何操作，因為歷史記錄列表中沒有先前的URL</p>
</body></html>
上面的代碼將顯示以下輸出。
2. 前進到下一頁
該history.forward()方法將在歷史記錄列表中加載下一個URL。
這與在瀏覽器中單擊“轉(zhuǎn)發(fā)按鈕”相同。
<html><title>項目</title>
<body style="background-color: aqua;">
<button onclick="history.forward();">前進</button>
<p> <b>注意:</b>單擊此處的"前進"按鈕將不會執(zhí)行任何操作，因為歷史記錄列表中沒有下一個URL:</p>
</body></html>
上面的代碼將顯示以下輸出（如果歷史記錄列表中不存在下一頁，則此示例將不起作用）：
3. 轉(zhuǎn)到特定頁面
可以使用 history.go() 方法從會話歷史記錄中加載特定頁面。
此方法將整數(shù)作為參數(shù)，負(fù)整數(shù)在歷史記錄中向后移動，正整數(shù)在歷史記錄中向后移動。
例
<html><title>項目</title>
<body style="background-color: aqua;">
<button onclick="history.go(-2);">回退第2頁</button>
<p> <b>注意:</b>單擊此處的"回退第2頁"按鈕將不會執(zhí)行任何操作，因為歷史記錄列表中沒有先前的URL。</p>
</body></html>
上面的代碼將顯示以下輸出：
四、總結(jié)
本文基于JavaScript基礎(chǔ)，介紹了如何通過window.history訪問 JavaScript瀏覽器對象，如何獲取對應(yīng)網(wǎng)頁的頁數(shù) 訪問網(wǎng)頁的上一頁，下一頁，訪問特定的頁面，都做了詳細的講解。通過用豐富的案例幫助大家更好理解。
希望大家可以根據(jù)文章的內(nèi)容，積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
使用JavaScript 語言，方便大家更好理解，希望對大家的學(xué)習(xí)有幫助。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請在后臺回復(fù)【 入群 】
萬水千山總是情，點個【 在看 】行不行