JS监听浏览器后退事件

Posted 2022-11-15 juicy-initial

在做报表开发时遇到问题：由第一层数据下钻到下一层，是在一个文件中开发，通过显示隐藏来控制，下钻到第二层后通过返回按钮来返回第一层，现根据业务需求调整，不能显示返回按钮，需通过浏览器的后退来返回到数据的第一层。

处理这个问题，首先要在下钻时，向浏览器的history插入一条记录，保证点击浏览器后退时，仍然在本文件中，而不是跳走了。其次，要监听浏览器的后退操作，处理页面显示隐藏逻辑。

1.使用pushState增加一个本页的url

function pushHistory()  
var state =  
title: "title", 
url: "#"
; 
window.history.pushState(state, "title", "#"); 

2.通过popstate监听来处理逻辑

window.addEventListener("popstate", function(e)  
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
, false);