根据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);