Jquery 禁用瀏覽器的 后退和前進按鈕

使用js,Jquery 禁用瀏覽器的back 和 next 按鈕：

有時為了防治用戶亂了訪問順序，不得不禁掉瀏覽器的前進后退按鈕。

 jQuery(document).ready(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); });

 這段代碼主要使用js的window.history  對象；介紹一下history的幾個比較重要的方法：

1、window.history.forward();   //加載下一個頁面（瀏覽過的） ，和瀏覽器上的 前進按鈕 效果相同

2、window.history.back();    //回到上一個頁面 ， 和瀏覽器上的 后退按鈕效果相同

ps： 如果瀏覽的網頁有緩存， 當點擊瀏覽器上的 前進和后退 按鈕時， 是優先加載瀏覽器的緩存數據,(重要一點是：不走服務器端代碼，如果在服務器端代碼加斷點，是不過斷點的， 這也是緩存的一個弊端，有時候容易導致表單中的數據錯亂掉，不能及時更新，)

3、history.go(0);    //刷新當前頁面 和瀏覽器上的 刷新 按鈕效果相同

history.go(-1): 效果和history.back() 效果相同

history.go(1) : 效果和history.forward() 效果相同

PS:  js history對象示例代碼

 

4、window.history.pushState(狀態碼, 標題 ， url)   /// 添加並激活一個歷史記錄條目， 向history 添加當前頁面的歷史記錄，並修改當前頁面的url。

舉個例子：

假如當前頁面的url是：http://localhost:28713/SBNext/index.aspx

執行：window.history.pushState('forward', null, 'badu.aspx');    

結果： 在瀏覽器歷史記錄中添加一條記錄http://localhost:28713/SBNext/index.aspx。當前頁面的url變成http://localhost:28713/SBNext/badu.aspx ，但是不會刷新頁面，也不會檢查url是否正確。  這時如果點擊 瀏覽器的back按鈕會回退到http://localhost:28713/SBNext/index.aspx頁面， 還是當前頁面。 所以這就是上面禁用back按鈕 的原理。

 

5、History.replaceStatet();   參數和pushState()函數一樣， 作用替換當前的url。

6、每當激活的歷史記錄發生變化時，都會觸發popstate事件 ， 點擊瀏覽器的back 和 next 按鈕會觸發popstate事件 ， 點擊刷新按鈕不會。

所以可以使用 popstate 事件監聽 back 和next 按鈕是否被點擊。