一篇文章帶你了解JavaScript Window History
一、前言
window.history 對(duì)象可以不用窗口window前綴編寫(xiě)。為了保護(hù)用戶的隱私,有限制的JavaScript可以訪問(wèn)此對(duì)象。
history.back() - 與點(diǎn)擊瀏覽器中的back按鈕相同。
history.forward() - 與點(diǎn)擊瀏覽器中的forward按鈕相同。
二、history對(duì)象
window.history對(duì)象包含瀏覽器會(huì)話歷史記錄，在當(dāng)前框架或窗口中訪問(wèn)的所有頁(yè)面的列表，window.history可以編寫(xiě)沒(méi)有窗口前綴的對(duì)象。
但是，為了保護(hù)用戶的隱私，JavaScript如何訪問(wèn)此對(duì)象存在一些限制。window.history 對(duì)象包含瀏覽器歷史記錄。
三、獲取訪問(wèn)的頁(yè)面數(shù)
該history.length屬性返回瀏覽器會(huì)話歷史記錄中當(dāng)前窗口的頁(yè)面數(shù)，還包括當(dāng)前加載的頁(yè)面。
例
- var result = history.length; // 返回當(dāng)前會(huì)話歷史記錄的大小
完整代碼：
- <!DOCTYPE html>
- <html>
- <title>項(xiàng)目</title>
- <body style="background-color: aqua;">
- <p>歷史記錄列表中的URL數(shù):</p>
- <p id="para"></p>
- <p> <b>注意:
- </b>本示例在新框架中打開(kāi)，并將被視為新的"會(huì)話":</p>
- <script>
- var result = history.length;
- document.getElementById("para").innerHTML = result;
- </script>
- </body>
- </html>
可以使用此屬性來(lái)找出用戶在當(dāng)前瀏覽器會(huì)話期間訪問(wèn)了多少頁(yè)面。
1. 返回上一頁(yè)
該history.back()方法將歷史記錄列表中的上一個(gè)URL加載。
這與在瀏覽器中單擊“后退按鈕”相同。
- <!DOCTYPE html>
- <html>
- <title>項(xiàng)目</title>
- <body style="background-color: aqua">
- <button onclick="history.back();">Go Back</button>
- <p><b>Note:</b> 單擊此處的“后退”按鈕將不會(huì)執(zhí)行任何操作，因?yàn)闅v史記錄列表中沒(méi)有先前的URL</p>
- </body>
- </html>
上面的代碼將顯示以下輸出。
2. 前進(jìn)到下一頁(yè)
該history.forward()方法將在歷史記錄列表中加載下一個(gè)URL。
這與在瀏覽器中單擊“轉(zhuǎn)發(fā)按鈕”相同。
- <!DOCTYPE html>
- <html>
- <title>項(xiàng)目</title>
- <body style="background-color: aqua;">
- <button onclick="history.forward();">前進(jìn)</button>
- <p> <b>注意:</b>單擊此處的"前進(jìn)"按鈕將不會(huì)執(zhí)行任何操作，因?yàn)闅v史記錄列表中沒(méi)有下一個(gè)URL:</p>
- </body>
- </html>
上面的代碼將顯示以下輸出(如果歷史記錄列表中不存在下一頁(yè)，則此示例將不起作用)：
3. 轉(zhuǎn)到特定頁(yè)面
可以使用history.go()方法從會(huì)話歷史記錄中加載特定頁(yè)面。
此方法將整數(shù)作為參數(shù)，負(fù)整數(shù)在歷史記錄中向后移動(dòng)，正整數(shù)在歷史記錄中向后移動(dòng)。
例
- <!DOCTYPE html>
- <html>
- <title>項(xiàng)目</title>
- <body style="background-color: aqua;">
- <button onclick="history.go(-2);">回退第2頁(yè)</button>
- <p> <b>注意:</b>單擊此處的"回退第2頁(yè)"按鈕將不會(huì)執(zhí)行任何操作，因?yàn)闅v史記錄列表中沒(méi)有先前的URL。</p>
- </body>
- </html>
上面的代碼將顯示以下輸出：
四、總結(jié)
本文基于JavaScript基礎(chǔ)，介紹了如何通過(guò)window.history訪問(wèn) JavaScript瀏覽器對(duì)象，如何獲取對(duì)應(yīng)網(wǎng)頁(yè)的頁(yè)數(shù) 訪問(wèn)網(wǎng)頁(yè)的上一頁(yè)，下一頁(yè)，訪問(wèn)特定的頁(yè)面，都做了詳細(xì)的講解。通過(guò)用豐富的案例幫助大家更好理解。
希望大家可以根據(jù)文章的內(nèi)容，積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
