頁面回退方案

頁面回退方案嘗試

實現方案

運用popstate事件，在componentDidMount階段監聽popstate事件，popstate在瀏覽器後退前進，路由跳轉都會觸發，所以在路由跳轉前須要解綁該事件（若是可以監聽到頁面全部路由跳轉前再解綁popstate事件，該方案會有較大改進）。若是監聽到該事件觸發分兩種狀況點擊後退跳轉指定頁面和點擊後退依舊在當前頁面。

禁止回退: history.pushState(null, null, document.URL);window.addEventListener('popstate', function () {history.pushState(null, null, document.URL);});

返回指定頁面： window.addEventListener('popstate', this.backPage,false); backPage = (e) => { if(!this.state.clickFlag){ this.setState({ clickFlag:true, }) window.location.href = window.location.href.split("#")[0]+"#/repaymentBill"; } }

實現補充

須要注意的是調用history.pushState()或history.replaceState()不會觸發popstate事件。只有在作出瀏覽器動做時，纔會觸發該事件，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調用history.back()）

不一樣的瀏覽器在加載頁面時處理popstate事件的形式存在差別。頁面加載時Chrome和Safari一般會觸發(emit )popstate事件，但Firefox則不會。

移動端則：蘋果在（頁面）加載時會自動觸發popstate 而安卓不會

針對這個問題，則在頁面加載時（pageshow），設置一個變量，在觸發popstate事件時不執行JS操做，在settimeOut後將 變量放開，保證以後操做正常執行popstate

pageshow:當一條會話歷史記錄被執行的時候將會觸發頁面顯示(pageshow)事件。(這包括了後退/前進按鈕操做，同時也會在onload 事件觸發後初始化頁面時觸發)

完整的方案代碼

var bool = false;
        window.addEventListener('pageshow', function () {            
            bool = false;            //進入頁面時bool置爲false，防止ios當即執行popstate       
            setTimeout(function(){   //定時器延遲將bool置爲true            
                bool = true;        
            },200)   
        });    

        window.history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.backPage, false);

        backPage = () => {
                if (bool) {
                    this.setState({
                        clickFlag: true,
                    })
                    window.location.href = window.location.href.split("#")[0] + "#/index";
                }
        }

複製代碼

細節補充 若是是單頁應用，則還有一個問題，就是路由跳轉的時候，(不輪哪一個瀏覽器，由於並無觸發頁面onload)並不會觸發 pageshow。因此能夠在componentDidMount中將boll置爲true

bool = true;        
            },200)  ``` 複製代碼