根据浏览器history模拟浏览器后退按钮显隐问题

Posted 2022-11-30 juicy-initial

场景：在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;