场景:在APP页面开发中,有一个需求,做一个返回按钮,实现的功能和浏览器的后退按钮相同。
措施:具体思路如下:
1.开始打开页面时,浏览器的history.length为1,按钮隐藏;
2.当history.length>1时,点击按钮执行 history.go(-1);
3.后退到历史记录栈中第一帧时,按钮隐藏。出于浏览器安全性考虑,history中没有给出属性判断其当前页的位置,所以,在开始打开页面,处于第一帧时,在当前url中添加参数,按钮点击事件触发时,根据该参数可判断是否是第一帧的位置。
解释:
一.history对象:
属性
- history.length
- history.state
- history.scrollRestoration
方法
- history.back()
- history.forward()
- history.go()
- history.pushState()
- history.replaceState()
二.向当前url中追加参数
var newurl = updateQueryStringParameter(window.location.href, 'sp', '2'); window.history.replaceState({ path: newurl }, '', newurl); function updateQueryStringParameter(uri, key, value) { if(!value) { return uri; } var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"); var separator = uri.indexOf('?') !== -1 ? "&" : "?"; if (uri.match(re)) { return uri.replace(re, '$1' + key + "=" + value + '$2'); } else { return uri + separator + key + "=" + value; } }