监听浏览器后退事件，使其转向指定URL，控制某些页面不能返回

（一）开发过程中经常遇到这种情况:页面不允许返回到上一页面或者需要转到指定页面，这时候我们就需要监听到浏览器后退事件，从而将它的浏览历史记录删除，然后转向你指定的URL。 具体执行过程如下:

$(function(){//清空浏览器历史记录pushHistory();//监听浏览器后退事件window.addEventListener("popstate",    function(e) {    //转向指定的URL    location.href=url;    }, false);    //清空浏览器历史记录 function pushHistory() {        var url = "#";        var state = {            title: "title",            url: "#"        };        window.history.pushState(state, "title", "#");    }});

注：这种方法有种缺陷，你将后退事件强制转到URL，如果你连续点击物理返回时会出现这两个页面之间来回跳，已经不是正常的返回了。如果想要返回正常，则需要在之前的n个页面都进行强制跳转，页面多的时候是不可行的。

（二）最近遇到了微信浏览器的后退事件处理，转到指定的URL上述方法就可以实现，但是如果需要监控到返回事件时关闭微信浏览器，因为微信有着自己的JS-SDK，所以需引入微信的js-sdk，传统js:window.close(); 在微信浏览器中不起作用。步骤如下（Java）：

引入参考公众号官网：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

1、后台代码：将微信公众号相关参数传到前台

/*** <b>描述:</b> * @param model* @param url 当前URL，必须保证一致* <br><b>Author:</b>* <br><b>Date:</b> 2017年7月25日 下午4:04:20*/public void weixinJS(Model model,String url){WechatInformation wci = wechatInformationService.load();String appId = wci.getAppid();String jsapi_ticket = wci.getJsapi();String noncestr = UUID.randomUUID().toString();String timestamp = Long.toString(System.currentTimeMillis() / 1000);model.addAttribute("appId", appId);model.addAttribute("jsapi_ticket", jsapi_ticket);model.addAttribute("noncestr", noncestr);model.addAttribute("timestamp", timestamp);model.addAttribute("url", url);String signature;try {signature = getSignature(jsapi_ticket,url,noncestr,timestamp);model.addAttribute("signature", signature);} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (AesException e) {// TODO Auto-generated catch blocke.printStackTrace();}}/*** <b>描述:</b> JS-SDK使用权限签名* @return * <br><b>Author:</b>* <br><b>Date:</b> 2017年6月5日 下午4:30:23 * @throws AesException  * @throws IOException */public String getSignature(String jsapi_ticket,String url,String noncestr,String timestamp) throws IOException, AesException{String s = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + noncestr + "×tamp=" + timestamp + "&url=" + url;String signature = getSha1(s);return signature;}public static String getSha1(String str) {if (str == null || str.length() == 0) {return null;}char hexDigits[] = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f' };try {MessageDigest mdTemp = MessageDigest.getInstance("SHA1");mdTemp.update(str.getBytes("UTF-8"));byte[] md = mdTemp.digest();int j = md.length;char buf[] = new char[j * 2];int k = 0;for (int i = 0; i < j; i++) {byte byte0 = md[i];buf[k++] = hexDigits[byte0 >>> 4 & 0xf];buf[k++] = hexDigits[byte0 & 0xf];}return new String(buf);} catch (Exception e) {// TODO: handle exceptionreturn null;}}

2、jsp页面操作

（1）引入js文件：<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

（2）

$(function(){        wx.config({            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。            appId: '${appId}', // 必填，公众号的唯一标识            timestamp: '${timestamp}', // 必填，生成签名的时间戳            nonceStr: '${noncestr}', // 必填，生成签名的随机串            signature: '${signature}',// 必填，签名，见附录1            jsApiList: ['closeWindow'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2        });        pushHistory();        window.addEventListener("popstate",        function(e) {            wx.closeWindow();        },false);        function pushHistory() {            var url = "#";            var state = {                title: "title",                url: "#"            };            window.history.pushState(state, "title", "#");        }    })

综上，就可以在返回的时候关闭微信浏览器。

注：上述（一）（二）都存在一个问题，在页面加载完毕之后，点击物理返回键，效果是成功的；但是当页面未加载完，物理点击的话js未被触发，就会按history中的记录来回跳转。

（三）要解决上述问题，归根结底是要让不想返回的页面，不要保存到history。这样跳转就不会存在上述问题。

纠结两天找到的解决方案：大致思路就是说将要不想返回的页面（以下简称A.jsp）的URL进行替换，替换成下一个跳转页面B.jsp的URL，当触发跳转事件时reload即可，这样history里头存放的是B.jsp的URL,浏览器history中没有存放，当然返回的时候就不会返回的A.jsp喽。具体如下：

var replaceUrl;          function pushHistory(replaceUrl) {              var state = {                  title: "title",                  url: replaceUrl              };              window.history.replaceState(state, "title",replaceUrl);          }       //当点击B.jsp跳转时      $("#btn").click(){          pushHistory("../"+url);//你要跳转的URL          location.reload();      }

注：这个replaceUrl必须是同域，跨域是不允许的