互联网技术 · 2024年4月2日 0

实现html5 pushstate和浏览器返回事件监听

这篇文章主要介绍了htMl5的pUShstate以及监听浏览器返回事件的实现,主要介绍了pUShstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下。

pUShstate与监听浏览器返回解决的问题

实际开发我们在A页面调用组件,在组件里面填好内容之后,发现想退出不想填了,因为组件与A页面此时在同一页面,点击返回时候给人感觉是返回上上个页面,但之前A页面填写的东西都没有了,这很影响体验。

因此可以使用pUShstate方法,不刷新浏览器改变uRl当你再返回时候就会返回到这个A页面而不是上上个页面。但此时还需要监听返回的按钮,进而控制组件的显示与隐藏。这点也至关重要。不然组件不隐藏,也就相当于没效果。

pUShState

使用方法(一般情况)

function pUShHisTory() { vaR state = { tITle: “tITle”, uRl: “#” }; window.HisTory.pUShState(state, “tITle”, “#”); }

参数说明:

pUShState() 带有三个参数:state是js对象,tITle是个标题(现在被忽略了),以及一个可选的URL地址。

关于pUShstate的说明

浏览器不会向服务端请求数据,直接改变uRl地址,可以类似的理解为变相版的hash;但不像hash一样,浏览器会记录pUShState的历史记录,可以使用浏览器的前进、后退功能作用。

监听浏览器返回按钮

1window.addEventListeneR(“POPstate”, function(e) { console.log(e); aleRt(“我监听到了浏览器的返回按钮事件啦”);//根据自己的需求实现自己的功能 }, FAlse);

到此这篇关于htMl5的pUShstate以及监听浏览器返回事件的实现的文章就介绍到这了。