美文网首页技术文档
window.history与window.onpopstate

window.history与window.onpopstate

作者: YellowPoint | 来源:发表于2018-11-20 18:53 被阅读172次
    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, '');
    });
    
    

    相关文章

      网友评论

        本文标题:window.history与window.onpopstate

        本文链接:https://www.haomeiwen.com/subject/ncoxqqtx.html