html5的pushstate以及监听浏览器返回事件的实现
2020-08-16 04:09
2767 查看
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实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- HTML5 浏览器返回按钮/手机返回按钮事件监听
- vue 项目中 如何动态监听浏览器以及iOS手机微信自带的返回按钮的事件
- 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现
- 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现
- 自定义webView,实现带title和返回的webView,监听webView的滑动事件
- 微信WEB开发中监听浏览器返回按钮事件强制返回指定页面
- 事件监听以及事件触发的简单实现流程
- 事件监听以及事件触发的简单实现流程
- Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现
- 监听手机浏览器的返回按钮事件
- 很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
- 很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
- HTML5 Web Speech API 结合Ext实现浏览器语音识别以及输入
- 很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
- 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交)
- 很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
- 很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
- 监听浏览器返回按钮事件
- js监听浏览器返回事件