html5中如何实现pushstate以及监听浏览器返回事件

这篇文章主要介绍了html5中如何实现pushstate以及监听浏览器返回事件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

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

html5中如何实现pushstate以及监听浏览器返回事件

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

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

pushState

使用方法(一般情况)

functionpushHistory(){
varstate={title:"title",url:"#"};
window.history.pushState(state,"title","#");}

参数说明:

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

关于pushstate的说明

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

监听浏览器返回按钮

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

感谢你能够认真阅读完这篇文章,希望小编分享的“html5中如何实现pushstate以及监听浏览器返回事件”这篇文章对大家有帮助,同时也希望大家多多支持恰卡编程网,关注恰卡编程网行业资讯频道,更多相关知识等着你来学习!

发布于 2021-03-21 22:37:04
收藏
分享
海报
0 条评论
178
上一篇:HTML5怎样实现rtmp流直播 下一篇:如何批处理将字符串或日期输出到Windows剪贴板
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码