Html5 onpopstate 事件禁止手机设备上的返回操作

Html5 onpopstate 事件禁止手机设备上的返回操作

在example.html页面添加如下脚本
window.onpopstate = function (event) {
     // alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
     // alert("page: " + getQueryString('page') + ", result: " + JSON.stringify(event.state));

      if (getQueryString('page') == "3") {
        if (JSON.stringify(event.state) == '{"page":3}') {
          //alert('ok');
          window.location.reload();
        }
      
      }
    };
    //绑定事件处理函数.  
    history.pushState({ page: 1 }, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1  
    history.pushState({ page: 2 }, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2  
    history.replaceState({ page: 3 }, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为2  
    history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"  
    history.back(); // 弹出 "location: http://example.com/example.html, state: null  
    history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3} 



function getQueryString(name) {
      // 如果链接没有参数，或者链接中不存在我们要获取的参数，直接返回空
      if (location.href.indexOf("?") == -1 || location.href.indexOf(name + '=') == -1) {
        return '';
      }
      // 获取链接中参数部分
      var queryString = location.href.substring(location.href.indexOf("?") + 1);

      // 分离参数对 ?key=value&key2=value2
      var parameters = queryString.split("&");

      var pos, paraName, paraValue;
      for (var i = 0; i < parameters.length; i++) {
        // 获取等号位置
        pos = parameters[i].indexOf('=');
        if (pos == -1) { continue; }

        // 获取name 和 value
        paraName = parameters[i].substring(0, pos);
        paraValue = parameters[i].substring(pos + 1);

        // 如果查询的name等于当前name，就返回当前值，同时，将链接中的+号还原成空格
        if (paraName == name && paraValue) {
          return decodeURI(paraValue.replace(/\+/g, " "));
        }
      }
      return '';
    }

经测试以上代码可用，通过监听、操作历史记录判断是否是返回操作，
如监听到是操作了手机设备上的返回按钮时，则可根据业务来做其它动作了