html5页面传值表(html5的pushstate以及监听浏览器返回事件的实现)
类别:Web前端 浏览量:1825
时间:2021-10-18 11:13:10 html5页面传值表
html5的pushstate以及监听浏览器返回事件的实现pushstate与监听浏览器返回解决的问题
1.实际开发我们在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的历史记录,可以使用浏览器的前进、后退功能作用。
监听浏览器返回按钮
window.addEventListener("popstate", function(e) { console.log(e); alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false);
转自:https://segmentfault.com/a/1190000022696823
到此这篇关于html5的pushstate以及监听浏览器返回事件的实现的文章就介绍到这了,更多相关html5的pushstate实现内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
热门推荐
- pythonlambda详解(Python的条件表达式和lambda表达式实例)
- 云服务器和物理服务器哪个更好(浅谈云服务器和独立服务器的八大差异)
- python turtle简易绘图(详解Python使用Plotly绘图工具,绘制甘特图)
- 怎么给div添加按下去效果(DIV点击折叠实例代码)
- 程序员哪些情况可以考虑辞职
- laravel mysql 操作方式(Laravel使用原生sql语句并调用的方法)
- docker swarm管理(Docker Swarm 服务编排之命令详解)
- js扫雷小游戏源代码(原生js实现简单贪吃蛇小游戏)
- dedecms二次开发教程(dedecms二次开发时使用{dede:arclist},{dede:list}获取附加表字段内容)
- nginx日志配置详细教程(Nginx访问日志及错误日志参数说明)