單頁面應用的遊覽器傳回鍵禁止問題

我們開發SPA應用時，會用到彈窗來提高使用者體驗。但是在微信等打開網頁時會有一個預設傳回按鈕，當我們點選時會預設跳轉URL，路由時沒有問題但是在彈窗時就有問題了，我們隻想關閉彈窗，其他都不變。這個應用場景是我們經常需要的。以下是解決方法。

①在打開彈窗時添加一個空的曆史狀态。

②監聽popstate事件，在點選傳回按鈕時，判斷是否有彈框存在，如果存在則關閉彈框（這裡需要有個公共的彈框服務）。

③如果用的是angularjs 需要重新整理一下視圖；

很簡單就以上三步就可以了，下面貼上代碼；

① history.pushState({}, '');      

② window.addEventListener("popstate", function(e) {
       if(PageService.dialogList.length>0){
             PageService.closeDialog();
            ③ $scope.$apply();
}
     }, false);