浏览器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);
}