onpopstate浏览器点击回退按钮时触发的事件
2016-05-11 09:45
330 查看
知识点:
1、onpopstate事件,点击后退按钮(或者在JavaScript中调用
2、hash 属性:可对URL的锚部分(从 # 号开始的部分)进行操作(可读可写);
关于hash的链接点击打开链接
需求:
微信页面,在当前页面点击某处时,弹出一个覆盖整个手机屏幕的层,弹出这个层以后,点击微信屏幕的返回按钮时,隐藏弹出层,而不退出当前页面!
解决方案:
在点击事件发生的时候利用hash属性给URL加上锚点,展示弹出层,而点击返回按钮后,去掉URL锚点,隐藏弹出层;点击返回按钮将触发onpopstate事件;为什么要给URL加锚点?需求描述的所有操作都在同一个页面上,所以如果不在URL上添加锚点,点击展示弹出层后,用户点击微信返回按钮,将退出当前页面!
checkLocation方法检测URL上是否有锚点win,有锚点则展示弹出层,反之,则隐藏弹出层
简陋的demo
1、onpopstate事件,点击后退按钮(或者在JavaScript中调用
history.back()方法)时触发;
2、hash 属性:可对URL的锚部分(从 # 号开始的部分)进行操作(可读可写);
关于hash的链接点击打开链接
需求:
微信页面,在当前页面点击某处时,弹出一个覆盖整个手机屏幕的层,弹出这个层以后,点击微信屏幕的返回按钮时,隐藏弹出层,而不退出当前页面!
解决方案:
在点击事件发生的时候利用hash属性给URL加上锚点,展示弹出层,而点击返回按钮后,去掉URL锚点,隐藏弹出层;点击返回按钮将触发onpopstate事件;为什么要给URL加锚点?需求描述的所有操作都在同一个页面上,所以如果不在URL上添加锚点,点击展示弹出层后,用户点击微信返回按钮,将退出当前页面!
$(".btn").click(function(){ location.hash = "win";//给url加上锚点,此锚点会自动加载到url的 $(".window").show(); $("#search").focus(); });
checkLocation方法检测URL上是否有锚点win,有锚点则展示弹出层,反之,则隐藏弹出层
function checkLocation(){ //hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。 if(location.hash.indexOf("#win")>-1){ $(".window").show(); }else{ $(".window").hide(); } }
//popstate事件在浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法). window.onpopstate = function() { checkLocation(); };
简陋的demo
相关文章推荐
- linux ps命令学习
- Hadoop的体系结构之HDFS的体系结构
- hdu 1011 Starship Troopers 树形背包
- Red Hat Enterprise Linux 6 系统安装
- Red Hat Enterprise Linux 7 系统安装
- LVS+Keepalived+Squid+Nginx高可用负载均衡缓存配置
- APUE,TLPI读书笔记——linux IO相关
- linux简单入门
- Topcoder SRM 687 div2
- Linux下C/C++版本发布自动脚本
- 在Shell里面判断字符串是否为空
- 初识Hadoop
- Tomcat内存设置详解
- Linux makefile 教程 非常详细,且易懂
- shell中的readonly
- Linux下重命名文件或文件夹(mv命令与rename命令)
- tomcat部署web项目的3中方法
- iptables删除指定某条规则
- linux查看CPU性能及工作状态的指令
- centos6.5下升级python版本为python2.7