(一)开发过程中经常遇到这种情况:页面不允许返回到上一页面或者需要转到指定页面,这时候我们就需要监听到浏览器后退事件,从而将它的浏览历史记录删除,然后转向你指定的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上述方法就可以实现,但是如果需要监控到返回事件时关闭微信浏览器,因为微信有着自己的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 block
- e.printStackTrace();
- } catch (AesException e) {
- // TODO Auto-generated catch block
- e.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 exception
- return 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必须是同域,跨域是不允许的