window.history与window.onpopstate

  1. history.go(1) 或是history.forward() 前进一页
    history.go(-1) 或是history.back() 前进一页
  2. history.go(x),x超过历史记录长度的话就没啥反应，不做跳转
  3. history.go('home.html')
    传入字符串参数，浏览器会跳转到历史记录中包含该字符串的第一个位置，可能后退，也可能前进，就看哪个更近
  4. location.reload(); //重新加载（有可能从缓存中加载）
    location.reload(true);//重新加载（从服务器重新加载）
    history.go(0) 应该也是缓存
  5. 自定义浏览器返回逻辑
  6. 前面加一个历史记录状态，也是为了返回一次还在当前页
//返回直接返回到信用卡中心页
window.history.pushState("creditCardCenter", "", '#');
window.onpopstate = function(e) {
    if(e.state != null) {
    //这里做浏览器返回，自己要做的操作
        history.go(-2)
    }
}
  1. window.onpopstate(MDN)

调用history.pushState()或者history.replaceState()不会触发popstate事件.

  1. 可以通过pushState 第三个参数 填一个空的url，来实现让浏览器不能前进
pushState() 三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL.

window.addEventListener('popstate', function() {
    window.history.pushState('noForward', null, '');
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容