工作筆記 禁用瀏覽器的返回按鈕

2022-09-16 10:27:10 字數 1350 閱讀 3199

出處:

防止頁面後退(使瀏覽器後退按鈕失效)

原理:用新頁面的url替換當前的歷史紀錄,這樣瀏覽歷史記錄中就只有乙個頁面,後退按鈕永遠失效。

注:history.go和history.back(包括使用者按瀏覽器歷史前進後退按鈕)觸發,

頁面由於使用pushstate修改了history),會觸發popstate事件。

【**如下】

注:直接放在不想後退跳轉的頁面即可!

方法一:

方法二:

$(function() );

}  window.history.pushstate('forward', null, '#'); //在ie中必須得有這兩行

window.history.forward(1);

})

其中涉及到的方法詳細介紹:

一、window.history:表示window物件的歷史記錄

二、 歷史記錄的前進和後退

window. history.forward() --- 此方法載入歷史列表中的下乙個 url,同瀏覽器中點選向前按鈕;

window. history.back() --- 此方法載入歷史列表中的前乙個 url,同瀏覽器中點選後退按鈕。

window.history.length:

可以檢視length屬性值,可知道歷史記錄棧中共有多少個記錄點。

三、操作歷史記錄點

html5的新api擴充套件了window.history,可實現儲存、替換當前歷史記錄點,以及監聽歷史記錄點。

1、儲存、替換當前歷史記錄點

建立當前歷史記錄點pushstate(state, title, url):建立(新增)乙個新的history實體,

state:狀態物件,記錄歷史記錄點的額外物件(要跳轉的url),可以為空;

title:頁面標題,目前所有瀏覽器都不支援;

url:可選的url,瀏覽器不會檢查url是否存在,只改變url,url必須同域。

window.history.pushstate(json,」",」

替換當前歷史記錄點replacestate():修改當前的history實體,不會新增。

類似replace(url),要更新當前歷史記錄的狀態物件或url時,使用replacestate()方法會更合適。

2 、監聽歷史記錄點onpopstate()

禁用瀏覽器後退按鈕

為解決瀏覽器後退按鈕禁用的方法,在網上搜尋了幾個方法,雖然可用但是沒有太完美的.1 利用js產生乙個 前進 的動作,以抵消後退功能,這種方法應該是最簡潔的,並且不需要考慮使用者連點兩次或多次 後退 的情況,缺點是當使用者端禁用了j ascript之後即失效。2 logout back disable...

禁用瀏覽器的後退按鈕

禁用瀏覽器的後退按鈕 瀏覽器的後退按鈕使得我們能夠方便地返回以前訪問過的頁面,它無疑非常有用。但有時候我們不得不關閉這個功能,以防止使用者打亂預定的頁面訪問次序。本文介紹網路上可找到的各種禁用瀏覽器後退按鈕方案,分析它們各自的優缺點和適用場合。一 概述 曾經有許多人問起,怎樣才能 禁用 瀏覽器的後退...

監聽瀏覽器返回按鈕

function false function pushhistory window.history.pushstate state,title window.addeventlistener popstate function e false 雖然我們監聽到了後退事件,但是頁面還是會返回上乙個頁面...