onpopstate浏览器点击回退按钮时触发的事件

微信开发中的一些总结

知识点：

1、onpopstate事件，点击后退按钮(或者在JavaScript中调用

history.back()

方法)时触发；

2、hash 属性：可对URL的锚部分（从 # 号开始的部分）进行操作（可读可写）；

关于hash的链接点击打开链接

需求：

微信页面，在当前页面点击某处时，弹出一个覆盖整个手机屏幕的层，弹出这个层以后，点击微信屏幕的返回按钮时，隐藏弹出层，而不退出当前页面！

解决方案：

在点击事件发生的时候利用hash属性给URL加上锚点，展示弹出层，而点击返回按钮后，去掉URL锚点，隐藏弹出层；点击返回按钮将触发onpopstate事件；为什么要给URL加锚点？需求描述的所有操作都在同一个页面上，所以如果不在URL上添加锚点，点击展示弹出层后，用户点击微信返回按钮，将退出当前页面！

[html] view
plain copy

 





$(".btn").click(function(){  

      location.hash = "win";//给url加上锚点，此锚点会自动加载到url的   

      $(".window").show();  

      $("#search").focus();  

});  

checkLocation方法检测URL上是否有锚点win，有锚点则展示弹出层，反之，则隐藏弹出层

[javascript] view
plain copy

 





function checkLocation(){  

        //hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。  

        if(location.hash.indexOf("#win")>-1){  

            $(".window").show();  

        }else{  

            $(".window").hide();  

        }  

}  

[javascript] view
plain copy

 





//popstate事件在浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法).  

 window.onpopstate = function() {  

      checkLocation();  

 };  
  

以下为一个新的案例，也是手机端关于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 '';  

    }  

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