bom操作----history物件
阿新 • • 發佈：2020-12-19
目錄
一、後退—back()
- 移動到上一個訪問頁面，等同於瀏覽器的後退鍵。
history.back();//後退
二、前進—forward()
- 移動到下一個訪問頁面，等同於瀏覽器的前進鍵。
history.forward();//前進
<button id="gol">倒退</button> <buttonid="gor">前進</button> <script> console.log(window.history); gol.onclick = function(){ history.back(); } gor.onclick = function(){ history.forward(); } </script>
三、go()
- 接受一個整數作為引數，移動到該整數指定的頁面，比如go(1)相當於forward()，go(-1)相當於back()。
- 引數為1：前進1；引數為-1：倒退1
- 引數為2：前進2；引數為-2：倒退2
- history.go(0)相當於重新整理當前頁面。
history.go(1);
四、pushState()----建立一條歷史記錄
- history.pushState(data,title,url)–每執行一次都會增加一條歷史記錄，瀏覽器在返回時，就不會返回前一個頁面了，
- data：要設定的history.state的值，可以是任意型別的值，可根據此值進行判斷執行想要的操作。
- title：現在大多數瀏覽器不支援或者忽略這個引數，最好用null代替。
- url：位址列的值，若不需要可用空來代替。
history.pushState(null,'window物件',"./window物件.html");
- 下面這個程式碼是可以監聽到前進倒退按鈕的狀態
window.addEventListener("popstate",function(){ console.log(1); })
五、replaceState()----修改當前的歷史記錄
- replaceState()是用來修改當前的歷史記錄(history實體)，而不是建立一個新的歷史記錄，所以，當執行完history.replaceState()後，點選返回按鈕照樣會返回上一個一面。當需要更新一個state物件或者當前history實體時，可以用replaceState()來實現。
history.replaceState(null,null,"./window物件.html");
六、禁止主介面系統回退
- login.html
<body> 登入介面 <a href="./admin.html">登入</a> <script> history.replaceState(null,null,'./admin.html'); </script> </body>
- admin.html
<body> 主系統介面 </body>
七、標籤實現前進倒退
- login.html
<body> 登入介面 <a href="./admin.html">登入</a> <a href="javascript:history.go(-1);">倒退</a> <a href="javascript:history.go(1);">前進</a> </body>
- admin.html
<body> 主系統介面 </body>
- 禁止a點選跳轉
- href=“javascript:void(0)”