监听浏览器后退事件，使其转向指定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、后台代码：将微信公众号相关参数传到前台

	/**
	* 描述: 
	* @param model
	* @param url 当前URL，必须保证一致
	* 
Author:
	* 
Date: 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 block
			e.printStackTrace();
		} catch (AesException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	/**
	* 描述: JS-SDK使用权限签名
	* @return 
	* 
Author:
	* 
Date: 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 exception
			return null;
		}
	}

2、jsp页面操作

（1）引入js文件：

（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必须是同域，跨域是不允许的