根据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);    
原文地址:https://www.cnblogs.com/juicy-initial/p/11592559.html