禁止用戶退出網頁,就一個添加窗體歷史狀態方法,代碼很簡單,但是建議大家不要去使用,會給用戶帶來不友好的體驗,我這里只是學習這種方法,看到自己代碼上有也知道在哪里改變這些代碼,所以分享一下:
實現原理:
當我們打開一個網頁時,沒有退回,是因為地址欄里還沒有上一頁的歷史記錄;如果你繼續瀏覽下一頁了,有了一條歷史記錄,你又可以退回之前瀏覽的網頁; 哪么在這里怎么網頁無法退回去上一頁呢?
全部通過js代碼實現:
window.history.pushState() //意思是 給窗體添加一條歷史記錄 //history歷史的意思,pushState() 推動狀態 ,方法意思是在歷史記錄中增加一條新的記錄;
window.history.replaceState() //replaceState() 替換狀態,方法意思是將當前的歷史記錄給替換掉,傳說中的奪舍重生!
* 這兩方法分別有3個參數:
* state:一個與指定網址相關的狀態對象,popstate事件觸發時,該對象會傳入回調函數。如果不需要這個對象,此處可以填null。
* title:新頁面的標題,但是所有瀏覽器目前都忽略這個值,就像你保存頁面要你輸入標題,因此這里可以填null。
* url:新的網址,必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。一般使用#,來存放當前地址
*
* popstate 事件 :每當活動歷史記錄條目在同一文檔的兩個歷史記錄條目之間發生變化時,就會將事件分派到窗口。
* 也就是說窗體加載時不會觸發popstate事件,只有當地址欄發生改變時才會觸發popstate事件
解釋完了
來看看實列:
<script>
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#"); //大家都應該知道#就代表當前連接,這里是 給地址欄添加一條當前地址的歷史記錄
}
pushHistory(); //頁面第一次加載,先給地址欄賦個歷史記錄
//由於上面只能賦值一次,所以需要通過popstate事件觸發時,來進行回調這個方法
window.addEventListener("popstate", function(e) { //給窗體添加一個popstate事件觸發時 來回調歷史記錄方法
pushHistory();
})
</script>
--------------------------------------------------------------------------------------------------------------------
到這里就結束咯 ,把上面這段js 直接拷貝到你的頁面去,然后你的頁面就無法退出了,但是建議大家不要這樣做哦,我這里只是為了學習 這個方法怎么用而已,僅此而已~~~~~~~~~