微信开发中的一些总结
知识点:
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(){
-
- if(location.hash.indexOf("#win")>-1){
- $(".window").show();
- }else{
- $(".window").hide();
- }
- }
-
- window.onpopstate = function() {
- checkLocation();
- };
以下为一个新的案例,也是手机端关于onpopstate事件的
HTML5 onpopstate 事件禁止手机设备上的返回操作
- 在example.html页面添加如下脚本
- window.onpopstate = function (event) {
-
-
-
- if (getQueryString('page') == "3") {
- if (JSON.stringify(event.state) == '{"page":3}') {
-
- window.location.reload();
- }
-
- }
- };
-
- history.pushState({ page: 1 }, "title 1", "?page=1");
- history.pushState({ page: 2 }, "title 2", "?page=2");
- history.replaceState({ page: 3 }, "title 3", "?page=3");
- history.back();
- history.back();
- history.go(2);
-
-
-
- function getQueryString(name) {
-
- if (location.href.indexOf("?") == -1 || location.href.indexOf(name + '=') == -1) {
- return '';
- }
-
- var queryString = location.href.substring(location.href.indexOf("?") + 1);
-
-
- var parameters = queryString.split("&");
-
- var pos, paraName, paraValue;
- for (var i = 0; i < parameters.length; i++) {
-
- pos = parameters[i].indexOf('=');
- if (pos == -1) { continue; }
-
-
- paraName = parameters[i].substring(0, pos);
- paraValue = parameters[i].substring(pos + 1);
-
-
- if (paraName == name && paraValue) {
- return decodeURI(paraValue.replace(/\+/g, " "));
- }
- }
- return '';
- }
经测试以上代码可用,通过监听、操作历史记录判断是否是返回操作,
如监听到是操作了手机设备上的返回按钮时,则可根据业务来做其它动作了