2. 程式人生 > >window.history API 實現禁止瀏覽器回退到上一頁

window.history API 實現禁止瀏覽器回退到上一頁

阿新 • • 發佈：2019-01-20
window.onload = function () { console.log('頁面載入'); // 初始化 const regex = /\/\w+\./; const pageName = window.location.pathname.match(regex).pop().replace(/\/|\./g, ''); const backCount = document.getElementById('back-count'); let count = window.history.state && window.history.state.count || 0
; document.title = `${pageName} page ${count}`; backCount.innerHTML = count; /* 這裡一定要先在瀏覽器歷史記錄中新增一個新的記錄， 因為點選回退按鈕後，當前文件會回到上一個 history 記錄頁面 如果這裡不提前 pushState() 新增記錄則會回到上一個頁面（我們的目的是阻止退回到上一頁） */ window.history.pushState({ count: count }, null
, `?count=${count++}`); /* 只有瀏覽器上的後退按鈕和 history 的 back() 可以觸發 popstate 事件 history.pushState() 不會觸發 */ window.addEventListener('popstate', function (e) { alert('xxx'); console.log('監聽到 popstate 事件'); console.log(count); backCount.innerHTML = count; document.title = `${pageName} page ${count}`; /* 注意： 呼叫 window.history.pushState 後再次獲取 window.history.state 得到的還是 pushState 前的狀態資料， 原因是 history.pushState 後雖然位址列url 變更了，但是並不會改變文件內容，即使這個時候popstate 事件中的程式碼可能會改變文件內容。 */
window.history.pushState({ count: count }, null, `?count=${count++}`); }) const back = document.getElementById('back'); const forward = document.getElementById('forward'); back.addEventListener('click', function () { window.history.back(); }) forward.addEventListener('click', function () { window.history.forward(); }) }

相關推薦

window.history API 實現禁止瀏覽器回退到上一頁

window.onload = function () { console.log('頁面載入'); // 初始化 const regex = /\/\w+\./; const pageName = window.locat

js禁止瀏覽器回退

<script> (function () { //防止頁面後退 history.pushState(null, null, document.URL); window.addEventListener('popstate', fun

禁止瀏覽器回退的辦法

history.pushState('a', null); window.addEventListener('popstate',function() { history.pushSta

vue+vuex+router實現阻止瀏覽器回退

clas ref mount 返回 state 組件 rip 而不是 window 場景說明，如圖，首頁有個列表，點擊加號後，會彈出一個表單，希望實現在顯示表單後，點擊回退，不是改變路由或者返回前一頁，而是關閉彈出的表單。 index.vue(

在vue中,如何禁止回退上一步，路由不存歷史記錄

在有些情況下，我們不想往路由裡新增歷史記錄。（vue的專案，vue-router中不想存歷史記錄） 根據vue官網提供的，樓主總結了一下，主要有以下幾種方案： 根據官網的解釋 。宣告式路由和程式設計式路由都是新增新的記錄，同時vue還提供了replace來替換路由

解決在頁面中按backspace回滾上一頁的問題

禁用backspace鍵//解決在頁面中按backspace回滾上一頁的問題 document.onkeydown = function(e) { var ev = document.all ? window.event : e; var obj = ev.target ||

【110】Vue2利用父子路由實現標籤頁切換，並且支援瀏覽器回退。

用 git clone 克隆下這個專案後，blog110 資料夾裡面就是這篇博文相關的原始碼。專案依賴使用了yarn進行管理。 檔案目錄結構： blog110 │ ├─.babelrc ├─.npmrc ├─index.template.

微信瀏覽器內禁止頁面回退返回

dev func 初始化 document window ref listen record cat <script type="text/javascript"> //禁止瀏覽器回退/返回 XBack = {}; (function (X

阻止瀏覽器回退

asc java null 當前 click 使用 var href 代碼 $(document).ready(function(e) { var counter = 0; if (window.history &&

vuejs在不使用history的情況下，回退返回到之前滾動的位置

切換 鉤子函數 activated 方式 原型圖 upd router html org 　　在vuejs裏，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣（借用vuejs官方文檔一句話）；但是官方文檔使用路由，來控制滾動行為是建立在HT

Activiti如何實現流程的回退

jpg tina eat complete 創建 key eve comment repos 1.概述流程回退一直以來是個老舊的難題，也一直沒有好的解決方法，本文就來詳述流程回退的解決辦法。首先我們來分析一下不同的流程審批情況，並在對應的節點上實現流程的回退處理，以及應該提

0604-Zuul構建API Gateway-Zuul的回退

-c spa fin aso put text lose awstat ica 一、概述 　　參看地址：https://cloud.spring.io/spring-cloud-static/Edgware.SR3/single/spring-cloud.html#hys

關於瀏覽器回退默認行為的研究 回退保存頁面狀態

回退 記錄 了解 結果 翻頁 沒有 tor cal als 緣起：最近在研究 移動端的頁面研發工作，由於之前從來沒有專業開發過移動端頁面，所以在開發過程中，可以說是處處有精彩，處處有收獲.最讓我意外的是，瀏覽器頁面回退問題 就是個頭疼的問題. 需求：我們的需求是，在a頁面，

解決瀏覽器回退不刷新

後退 問題 cti 緩存 ati func 從服務器 通過 UNC 可以通過監聽onpageshow來刷新頁面。代碼如下，在頁面的JS中添加 //後退不執行JS的問題 window.onpageshow = function(event) { 　　if (

ArcGIS JS API 實現路徑軌跡回放

效果圖： 原理：       建立兩個graphic圖層lineLayer、carLayer，在兩點之間進行插值，把小車圖片建立成graphic,然後顯示隱藏。簡單來說就是：根據設定的時間間隔，在兩個點之間建立n個點，然後代表小車的gr

瀏覽器回退鍵——重複提交

業務問題描述： 使用者新規一條記錄回到一覽頁面，點選瀏覽器回退鍵，使用者回到記錄新規頁面，此時很容易造成重複提交。 對應案： 在以上記錄新規頁面設定onpageon()方法，當從瀏覽器回到該頁面時彈出modal，5秒後重定向到一覽頁面。 問題： 1.當一個頁面上有多個按鈕，不同按鈕對modal彈出要

h5 history api實現無重新整理前進後退

history.pushState(data, title [, url])：往歷史記錄堆疊頂部新增一條記錄；data會在onpopstate事件觸發時作為引數傳遞過去；title為頁面標題，當前

使用Web Audio API實現基於瀏覽器的Web端錄音

有時候會有通過Web端錄音的需求，那麼如何實現呢，通過Web Audio API能夠實現，具體可以檢視官網的API，下面是實現單聲道錄音（壓縮音訊大小）的一個例子，共需要兩個js檔案，具體如下： 第一個js檔案： recorder.js (function(window){

js/jquery禁止頁面回退

$(function() { //防止頁面後退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushS

iOS微信瀏覽器回退不重新整理（監聽瀏覽器回退事件）

iOS在微信瀏覽器回退是不重新載入頁面的，有些時候是需要重新載入的，所以需要監聽回退事件 $(function(){ pushHistory(); }); function pushHistory(){ window.addEventLis