防止頁面後退（使瀏覽器後退按鈕失效）

防止頁面後退（使瀏覽器後退按鈕失效）

 

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

　　　　　注：history.go和history.back（包括用戶按瀏覽器歷史前進後退按鈕）觸發，

　　　　　　　頁面因爲使用pushState修改了history），會觸發popstate事件。

    【代碼以下】

      注：直接放在不想後退跳轉的頁面便可！

　　方法一：
       <script type="text/javascript">
            jQuery(document).ready(function ($) {
                if (window.history && window.history.pushState) {
    　　　　$(window).on('popstate', function () {
      　　    window.history.forward(1);
    　　　　});
  　　　　}
　　　　});
　　</script>

 

　　方法二【推薦】：

　　$(function() {
　　if (window.history && window.history.pushState) {
　　$(window).on('popstate', function () {
　　window.history.pushState('forward', null, '#');
　　window.history.forward(1);
　　});
　　}
　　window.history.pushState('forward', null, '#'); //在IE中必須得有這兩行
　　window.history.forward(1);
　　})

 

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

1、window.history：表示window對象的歷史記錄

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

   window. history.forward() --- 此方法加載歷史列表中的下一個 URL，同瀏覽器中點擊向前按鈕；
   window. history.back() --- 此方法加載歷史列表中的前一個 URL，同瀏覽器中點擊後退按鈕。
  

　 可移動到指定歷史記錄點：
    經過指定一個相對於當前頁面位置的數值，你可使用 go() 方法從當前會話的歷史記錄中加載頁面
    （當前頁面位置索引值爲0，上一頁就是-1，下一頁爲1）
   　如：要後退一頁（至關於調用back()）：
       　　　　 window.history.go(-1);
         　向前移動一頁（至關於調用forward()）：
        　　　　window.history.go(1);

　 window.history.length：

　　能夠查看length屬性值，可知道歷史記錄棧中共有多少個記錄點。
    　　

3、操做歷史記錄點

    HTML5的新API擴展了window.history，可實現存儲、替換當前歷史記錄點，以及監聽歷史記錄點。
    

　　一、存儲、替換當前歷史記錄點
        建立當前歷史記錄點pushState(state, title, url)：建立（添加）一個新的history實體，
                    state：狀態對象，記錄歷史記錄點的額外對象（要跳轉的URL），能夠爲空；
                    title：頁面標題，目前全部瀏覽器都不支持；
                    url：可選的url，瀏覽器不會檢查url是否存在，只改變url，url必須同域。
                    window.history.pushState(json,」",」http://www.qingdou.me/post-1.html」);
        替換當前歷史記錄點replaceState()：修改當前的history實體，不會新增。
                    相似replace(url)，要更新當前歷史記錄的狀態對象或URL時，使用replaceState()方法會更合適。
    

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

　　　  當history實體被改變時，popstate事件將會發生； onhashchange()可監聽URL的hash部分。
    
     三、讀取現有state        當頁面加載時，它可能會有一個非空的state對象。當頁面從新加載，頁面將收到onload事件，但不會有popstate事件。        然而，若是你讀取history.state屬性，將在popstate事件發生後獲得這個state對象。