不要随便监听改变浏览记录！

最近在项目中遇到的坑，已填平=-=
以后还是尽量别手动强跳页面打乱浏览器访问记录，尽量用原生的返回，性能体验比较好(返回后有缓存除外。

监听浏览器返回事件

window.history.pushState(null, null, null);//兼容
window.addEventListener("popstate", function(e) {
    //do something  
},false);

注意：ios8会有bug，页面加载的时候会直接执行监听的内容。

原因：浏览器版本，导致进页面就默认触发了popstate，导致了代码段执行，可以用下面的代码解决。

var obj = {
    params:{isRun: false},
    backTo:{
        //图一代码段
    },
    initBack:{
       var self = this;
       self.param.isRun = false;  
       setTimeout(function () { self.param.isRun = true; }, 1000); //延迟1秒 防止微信返回立即执行popstate事件  
       self.backTo();
    }
}

浏览器缓存问题

1.如是跳转页面 可以加时间戳

//调用
timestamp(getReferrer())

//定义函数
function getReferrer() {
    var referrer = '';
    try {
        referrer = window.top.document.referrer;
    } catch (e) {
        if (window.parent) {
            try {
                referrer = window.parent.document.referrer;
            } catch (e2) {
                referrer = '';
            }
        }
    }
    if (referrer === '') {
        referrer = document.referrer;
    }
    return referrer;
};

function timestamp(url) {
    var getTimestamp = new Date().getTime();
    if (url.indexOf("&timestamp") > -1) {
        url = url.split("&timestamp")[0] + "&timestamp=" + getTimestamp;
    } else {
        if(url.indexOf("?") > -1){
            url = url + "&timestamp=" + getTimestamp
        }else{
            url = url + "?timestamp=" + getTimestamp
        } 
    }
    return url;
}

2.可以在前页设置cookie或者session，设置标识判断

cookie.set('isDelateBack', '1');//前页 设置cookie

if(cookie.get('isDelateBack')=='1'){//后页 监听cookie,刷新页面(重置状态或清空cookie)
    cookie.set('isDelateBack','0')
    window.location.reload();
}

3.缓存机制是浏览器自带的， 不会发起请求和执行js代码。pageshow方法是无效的

后续

• 微信小程序自带返回在ios和安卓的区别。

• 新坑，ios11以上，position：fixed弹窗上弹出键盘输入，会导致定位的弹窗错位以及光标错位；换成absolute就好

更新于2018.02.09 20:10 (小年夜)

赏

请我喝杯卡布奇诺？

微信