根據history的popstate事件無法判斷瀏覽器點擊前進還是后退問題


場景:通過popstate事件解決了瀏覽器后退時未退出本文件,點擊一次后退后,瀏覽器的前進按鈕的狀態是可點,此時仍然是在處理后退的邏輯,導致頁面混亂。

措施:1.在第一次執行pushHistory方法時插入的歷史記錄,點擊后退,能通過popstate觸發時state屬性值進行判斷,若為null,則點擊是后退,若是對象中包含插入歷史記錄的信息,則未前進操作。

           2.插入多條歷史記錄時,並處在第一次插入歷史記錄幀之后,無法判斷是前進操作還是后退操作。顯然,popstate事件並不適用。經嘗試后,改為hashchange事件,hashchange事件對象中包含變化前后的鏈接地址(oldURL和newURL),將每次的pushHistory中添加錨點,獲取錨點值大小來判斷前進或者后退。

           3.點擊前進時,不執行后退的邏輯,並且頁面不能前進,只能去back()。同理,刷新時,頁面要go(-n)。

代碼如下:

        var newURL='';
        var oldURL='';
        var isForward=false;//是否是前進
        if (window.location.hash !== "") {//頁面刷新時,根據hash判斷回到頁面最開始狀態
            var i=Number(window.location.hash.replace('#',''));
            window.history.go(1-i);
            isForward=true;
        }
        window.addEventListener('hashchange', function(e) {
            newURL=e.newURL.slice(-2,-1)=='#'?e.newURL.slice(-1):0;
            oldURL=e.oldURL.slice(-2,-1)=='#'?e.oldURL.slice(-1):0;
            if(!isForward){
                if(parseInt(newURL)<parseInt(oldURL)){
                    ..........//單頁面中業務后退邏輯
                }else {
                    //前進時不操作
                    window.history.back();
                    isForward=true;
                    var dia=$.dialog({
                        title:'提示',
                        content:'頁面內不能前進',
                        button:["關閉"]
                    });

                }
            }else {
                isForward=false;
            }

        }, false);    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM