使用《UrlHash/锚点》解决移动设备中的单页面应用的物理[返回键]带来的困扰
2015-11-02 21:27
483 查看
事由
今天同事在开发WebApp的时候,遇到一个小问题,就是移动设备,准确来说是安卓设备中的物理返回键,会直接忽略一些页面效果,直接跳转回上一个页面。但是同事的这个页面包含了几个层的点击显示,在列表里点击会切换层显示详情。但是如果点击物理返回键之后,会直接略过列表,跳回上一个页面。设想中的效果
[OrderPage] → <ALinkClick> → [ListPage] → <ListClick> → [ItemDetails] → <VirtualBackButtonClick> → [ListPage] → <VirtualBackButtonClick> → [OrderPage]
但实际遇到的问题
[OrderPage] → <ALinkClick> → [ListPage] → <ListClick> → [ItemDetails] → <PhysicalBackButtonClick> → [OrderPage]
中间略过了[ListPage],这样是完全违背了使用习惯的,而且也并不可能强迫用户只用页面中的虚拟返回键,所以就尝试了一下,给同事提供了一个解决这个问题的思路,这里稍微记录一下。
核心
UrlHash/锚点 + window.onhashchange事件。解决思路
首先,同事需要实现的效果,从原理上来说,就是点击一个层A(或者说是LIst/Ul中的一个节点),触发一个点击事件,然后展示一个层B,层B中的内容为层A对象物品的详情页。然后,思路明白了就好说了,就是点击返回按钮的时候隐藏层B。从百度中我们可以知道,如果通过PhoneGap之类的封装过的WebAPP,确实是可以捕获物理返回键的点击事件的。但是我们是网页,没做任何封装,同样,如果是微信WebAPP的话,也是应该没办法捕获的。
那么解决方案就寄望于Url中带参了。再从百度中可以了解到,Url中出现#有两种作用,一种是跳转到指定锚点,另一种就是传递参数。我们解决当前问题就是用的第二种作用,配合HTML5中新增的window.onhashchange事件,和#会改变浏览器的访问历史,增加一个访问历史,使浏览器中的返回键会返回到上一个位置。这就得以比较顺利的解决物理返回键的问题了。
参考他人Blog文章《URL中出现#号》,非常感谢。
测试代码
因为比较偷懒,div层的点击事件就直接写死在html中了。css:
<span style="font-family:Microsoft YaHei;font-size:18px;">div { width: 200px; height: 100px; display: none; font-size: 5em; }</span>
html:
<span style="font-family:Microsoft YaHei;font-size:18px;"><div id="div1" onclick="divClick('div2')" style="background-color: yellow;display: block;">Div1</div> <div id="div2" onclick="divClick('div3')" style="background-color: red;">Div2</div> <div id="div3" onclick="divClick('div4')" style="background-color: green;">Div3</div> <div id="div4" onclick="divClick('div1')" style="background-color: blue;">Div4</div></span>
js:
<span style="font-family:Microsoft YaHei;font-size:18px;">//给页面绑定hashchange事件 window.onhashchange = function(){ var hashCode = location.hash; var _id = hashCode.substr(1);//去掉#,获取后面带的参数 divchange(_id); }; //div点击事件 function divClick(_id){ location.href = "#"+_id; } //div切换触发 function divchange(_id){ div1.style.display = 'none'; div2.style.display = 'none'; div3.style.display = 'none'; div4.style.display = 'none'; document.getElementById(_id).style.display = 'block'; }</span>
结果
通过以上代码,可以通过点击切换不同的div显示,具体显示由点击后传入的锚点带的参数决定。如果想进一步复杂,甚至可以组织成复杂的锚点#带参,如固定5个字符长度的参数,每个字符的字母或者数字表示特定的层的显示或隐藏之类的。当然,上面代码也有非常不足的地方,例如,一开始的没有锚点#的时候,或者有错误锚点#的时候,又怎么处理。不过这些都是些不影响解决主要功能需求的小地方了,实际用上的时候再注意补上就OK啦。附件
完整测试代码:点击打开链接相关文章推荐
- Linux 键盘模拟测试
- oracle linux yum update加速
- xerces C/C++ 读取XML文件
- Opencv (Opencv2)结合MFC学习数字图像处理---显示图片
- 关于正则表达式
- 接口和类方法中的 SELF
- android学习之使用AIDL实现进程间的通讯
- C#学习笔记 基本数据类型
- Delete Duplicate Emails---easy
- OD调试篇12
- 介绍一个开源的在线管理SQLServer的小工具--SQLEntMan
- Saltstack简单汇总,快速入门
- 缩放WebView中图片尺寸 适合屏幕尺寸
- 【bzoj4300】绝世好题
- vs2010 + opencv保存图像模块
- 展讯7715 Android 平台编译
- OC第六天 block
- 在Asset Store上购买unity插件
- LeetCode Binary Tree Postorder Traversal(数据结构)
- 《剑指offer》——不用加减乘除做加法