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

知识点：

1、onpopstate事件，点击后退按钮(或者在JavaScript中调用history.back()方法)时触发；

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

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

需求：

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

解决方案：

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

[html]  view plain  copy

 

1. $(".btn").click(function(){  
2.       location.hash = "win";//给url加上锚点，此锚点会自动加载到url的   
3.       $(".window").show();  
4.       $("#search").focus();  
5. });  

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

[javascript]  view plain  copy

 

1. function checkLocation(){  
2.         //hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。  
3.         if(location.hash.indexOf("#win")>-1){  
4.             $(".window").show();  
5.         }else{  
6.             $(".window").hide();  
7.         }  
8. }  

[javascript]  view plain  copy

 

1. //popstate事件在浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法).  
2.  window.onpopstate = function() {  
3.       checkLocation();  
4.  };  

转载自夏天的甲虫的博客： 原文链接：http://blog.csdn.net/u012076852/article/details/51364857