zoukankan      html  css  js  c++  java
  • SPA路由器开发手记-解决chrome下location.replace后,浏览器返回操作导致页面刷新的问题

    我的路由器是参考的backbone和EXT5做的。其中history采用的hashchange的方式来进行监控,IE67不支持的问题可以参考司徒大这篇文章

    我要说的是在chrome下通过location.replace替换完hash的时候,用户调用浏览器的后退操作,将导致页面刷新

    相信backbone的用户也会有这个问题,我的解决方法是用history.replaceState的方式更新hash 就木有这个问题了

    以下是我修改的backbone  history中的_updateHash方法

    _updateHash: function(location, fragment, replace) {
      var me = this,
        hash
    = '#' + fragment; if (replace) { //由于chrome下location.replace替换当前页后 进行返回操作会刷新页面
      //ff无辜受到牵连 同罚之 //所以我们这里采用replaceState的方式更新hash if ((typeof me.history.replaceState === 'function') && !me.iframe) { me.history.replaceState(me.history.state, '', hash); }
    else { //先移除location中的锚点信息 var href = location.href.replace(/(javascript:|#).*$/, ''); //替换当前页 这么做不会产生浏览历史 location.replace(href + hash); } } else { // Some browsers require that `hash` contains a leading #. // 如果不是 则简单的location.hash='#xxxx' location.hash = hash; } }

      值得说一下的是backbone的Router非常非常薄,从URL Fragement->handler 映射的方式我觉得并不可取,人们常常抱怨路随着项目扩张由规则注册越来越膨胀很大一部分就是因为这个原因(另外一部分是路由规则的单一)。

      我的路由模块 是从URL Fragement->routeData的映射, 该模块由Router、Route,History三个部分组成,History就不说了 主要就是围绕hashchange进行的封装,Router主要是处理History的hashchange事件,在发生hashchange事件的时候 通过调用其中的Route一个一个对hash进行识别,如果能够匹配 则从hash中提取并返回routeData

  • 相关阅读:
    解决跨域问题的后端解决方案
    java-反射
    验证接口实现类对于接口中所有方法是否都要重写?
    完成Triangle时遇到的问题
    刚知道的一种算法
    完成ATM编程练习题时遇到的问题
    完成Account编程练习遇到的问题
    完成StopWatch编程练习题时遇到的一些问题
    Window环境下Java备份和恢复Mysql数据
    IDEA导入项目不下载依赖问题
  • 原文地址:https://www.cnblogs.com/xmlsvg/p/3722669.html
Copyright © 2011-2022 走看看