單頁面網(wǎng)站禁用瀏覽器后退鍵

joywek 發(fā)布于2019-08-01 18:38 / 2847人閱讀

摘要：項目上線后，客戶反應當頁面跳轉到級或級頁面，點擊瀏覽器后退鍵時，頁面返回上級頁面后提示缺少參數(shù)，頁面的數(shù)據(jù)也是空白的，為了解決這一問題，我的解決方案是禁用瀏覽器后退鍵，下面是解決方法在方法中，用監(jiān)聽地址變化。

該文章適用于angularjs創(chuàng)建的單頁面應用SPA，如vuejs或react.js不在本文討論范圍內(nèi)。

我用angularjs和sb-admin2實現(xiàn)了前端框架，在不考慮瀏覽器后退鍵的情況下，是用$state和$stateParams實現(xiàn)后退功能的，當然也可以自己創(chuàng)建全局單例或是localstroge、sessionstorge處理歷史跳轉數(shù)據(jù)。

項目上線后，客戶反應當頁面跳轉到3級或4級頁面，點擊瀏覽器后退鍵時，頁面返回上級頁面后提示缺少參數(shù)，頁面的數(shù)據(jù)也是空白的，為了解決這一問題，我的解決方案是禁用瀏覽器后退鍵，下面是解決方法：

在angular.module("appId").run()方法中，用$locationChangeStart監(jiān)聽url地址變化。代碼如下：

$rootScope.$on("$locationChangeStart",function(ev,to,from){
    if($rootScope.previousState && $rootScope.nowState && $rootScope.previousState == to)
    {
        console.log("not back");
        ev.preventDefault();
    }
    else{
        $rootScope.previousState = from;
        $rootScope.nowState = to;
    }
});

這樣之前的問題就可以避免了，但是我也發(fā)現(xiàn)了一個小bug。雖然禁用了瀏覽器的后退鍵，用戶點擊業(yè)務頁面上的返回按鈕時，頁面雖然成功返回到上一頁面，但是瀏覽器地址欄的url沒有變，當再次點擊返回按鈕時url又變回正常。

因為對功能沒啥影響，就沒有再深入了解該問題，如果有高人解決或是了解該問題，望請告知。

GPU云服務器云服務器后退鍵 js屏蔽后退鍵單頁面網(wǎng)站源碼頁面后退

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51883.html

單頁面網(wǎng)站禁用瀏覽器后退鍵

摘要：項目上線后，客戶反應當頁面跳轉到級或級頁面，點擊瀏覽器后退鍵時，頁面返回上級頁面后提示缺少參數(shù)，頁面的數(shù)據(jù)也是空白的，為了解決這一問題，我的解決方案是禁用瀏覽器后退鍵，下面是解決方法在方法中，用監(jiān)聽地址變化。該文章適用于angularjs創(chuàng)建的單頁面應用SPA，如vuejs或react.js不在本文討論范圍內(nèi)。我用angularjs和sb-admin2實現(xiàn)了前端框架，在不考慮瀏覽器...

Scholer 2019-08-26 17:15 評論0 收藏0
多頁面網(wǎng)站禁用瀏覽器后退鍵

摘要：如標題所說，本文提供的方法適用于多頁面網(wǎng)站，如單頁面應用等不適用。利用和控制瀏覽器后退鍵失效，下面說一下如何實現(xiàn)。當你在頁面上寫了瀏覽器會在中添加，同時頁面并不跳轉，但你只加了一次，所以只對一次后退事件起作用。如標題所說，本文提供的方法適用于多頁面網(wǎng)站，如SPA單頁面應用等不適用。利用window.onpopstate和window.history.pushState 控制瀏覽器后...

Kerr1Gan 2019-08-26 11:48 評論0 收藏0
多頁面網(wǎng)站禁用瀏覽器后退鍵

摘要：如標題所說，本文提供的方法適用于多頁面網(wǎng)站，如單頁面應用等不適用。利用和控制瀏覽器后退鍵失效，下面說一下如何實現(xiàn)。當你在頁面上寫了瀏覽器會在中添加，同時頁面并不跳轉，但你只加了一次，所以只對一次后退事件起作用。如標題所說，本文提供的方法適用于多頁面網(wǎng)站，如SPA單頁面應用等不適用。利用window.onpopstate和window.history.pushState 控制瀏覽器后...

BLUE 2019-08-01 18:36 評論0 收藏0