瀏覽器history操作實現一些功能

返回攔截

功能：從廣告進入到落地頁后，給history增加一個頁面，攔截返回動作

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

並且加入了一些條件判斷，包括 history.state， history.state.page，history.state.entered。

以上這些方法可以實現按需操作history對象。

 

但history操作后，按返回按鈕其實是只更新url地址，不刷新頁面的，最終的刷新頁面，是用 window.onpopstate 監聽，

在判斷條件符合后，手動去reload一次頁面。

以下就是實現該功能的代碼：

/**
 * @note    從廣告渠道過來后，按返回按鈕時的攔截功能
 * @author  kangxufeng <[e-mail]>
 * @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);
}