浏览器history操作实现一些功能

返回拦截

功能：从广告进入到落地页后，给history增加一个页面，拦截返回动作

主要用到的是h5中的history对象，使用了pushState，和replaceState来操作。

并且加入了一些条件判断，包括 history.state， history.state.page，history.state.entered。

以上这些方法可以实现按需操作history对象。

 

但history操作后，按返回按钮其实是只更新url地址，不刷新页面的，最终的刷新页面，是用 window.onpopstate 监听，

在判断条件符合后，手动去reload一次页面。

以下就是实现该功能的代码：

/**
 * @note    从广告渠道过来后，按返回按钮时的拦截功能
 * @author  kangxufeng <kangxufeng@duiba.com.cn>
 * @create  17/08/08
 * @des     1.url中存在a_tuiaId时,激活拦截功能
 *          2.插入state:{page:'intercept'}的页面
 *          3.当前页面state:{page:'current'}
 */

;
(function() {
  var intercetpUrl = '/';

  $(function() {
    if (history.pushState) {
      // 支持pushState
      if (!history.state) {
        // 未插入页面
        if (isToIntercept()) {
          initReturn();
        }
      } else {
        //已插入页面
        window.onpopstate = function(e) {
          if (history.state && history.state.page == 'current') {
            location.reload();
          } else if (history.state && history.state.page == 'intercept') {
            if (!history.state.entered) {
              // 未拦截
              history.state.entered = true;
              updateTimes(function() {
                location.reload();
              });
            } else {
              // 已拦截
              history.go(-1);
            }
          }
        }
      }
    }

  })

  function initReturn() {
    if (!history.state) {
      var thisLocation = location.href;
      history.replaceState({page:'intercept',entered:false},'',intercetpUrl);
      history.pushState({page:'current'},'',thisLocation);
    }
    window.onpopstate = function () {
      // location.reload();
      if(history.state && history.state.page == 'intercept') {
        if (!history.state.entered) {
          // history.state.entered = true;
          history.replaceState({page:'intercept',entered:true},'',intercetpUrl);
          updateTimes(function() {
            location.reload();
          });
        }
      }
    }
  }

  function updateTimes(callback) {
    callback & callback();
  }

  function isToIntercept() {    
    if (getparams('a_tuiaId')) {
      // 存在a_tuiaId，表示从广告进来
      return true;
    } else {
      return false;
    }
  }

  function getparams(name) {
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(location.href);

    if (results === null) return "";
    else return results[1];
  }
})(Zepto);

 

返回上上个页面

功能：首页打开商品详情页B，判断售罄跳转到售罄页C，在C页面点返回时略过B直接回到首页。

B.js:

jumpToEmpty: function() {
  history.replaceState({page: 'soldout'}, '', '/item/soldOut');
  location.reload();
}

C.js:

window.onpopstate = function() {
  history.go(-1);
}