web自定义返回功能
来源:互联网 发布:js给一个二维数组赋值 编辑:程序博客网 时间:2024/06/05 08:58
最近做一个项目有些页面需要加上返回按钮,在浏览器上由于可以随意输入页面地址所以这个返回便不是想像的那么好做了。
但是静下来想一下只要保证维持一个有序的数组,返回便有可能实现。难点在何时改变数组内哪条数据、何时添加、何时删除。
1.当一进入页面时立即保存该页面的全地址,包括参数(所以该功能只针对get请求有效,post请求由于不在 url上直接加参数所以不能用该思路)。
2.不管你从哪个url进入都需要正常返回,所以每个页面需要一个缺省返回地址,退当找不到上级时启用该地址。
3.当用户刷新时某个页面时要需要判断数组中是不是有相同的全地址如果有就采用截断方式来保证该功能的不发生重复跳转(即获取数组中该参数的值置,并把该参数后面所有的数据全删除)
4.存储方式:采用了双存储模式 sessionStorage和cookie,并存入时对数据进行64位编码
5.需要用到jquery和jquery的base64插件.
function sessionOrCookieStorageGet(key){ $.base64.utf8encode = true; var value = null; if(window.sessionStorage){ value = sessionStorage.getItem(key); }else{ value = $.cookie(key,{path:'/'}); } if(value!=null&&value!=undefined){ value = $.base64.atob(value,true); } return value;}function sessionOrCookieStoragePut(key,value){ $.base64.utf8encode = true; if(window.sessionStorage){ sessionStorage.removeItem(key); try{sessionStorage.setItem(key,$.base64.btoa(value))}catch(e){return false;} }else{ try{ $.cookie(key,$.base64.btoa(value),{expires: 1,path:'/'});}catch(e){return false;} } return true;}
thisUrl:即当前请求的全地址如(http://www.baidu.com/afaf?a=b)
thisAction:为当前ur唯一标识用于区分url
isReplacePrev:当判断到thisAction相同时是否采用截断
default;缺省url
//设置返回urlfunction prevBackSet(thisUrl,thisAction,isReplacePrev){ thisUrl = thisUrl.replace(/%2F/g,"/"); if(thisAction=="index"){//排除主页 sessionOrCookieStoragePut("prevUrl",JSON.stringify([])); return; } var prevUrl = sessionOrCookieStorageGet("prevUrl"); if(prevUrl!=null&&prevUrl!=undefined){ prevUrl = JSON.parse(prevUrl); var index = $.inArray(thisUrl,prevUrl); if(index!=-1&&prevUrl.length>index+1) {//把后面的全干掉 prevUrl.splice(index+1, prevUrl.length - index - 1); }else if(index==-1&&isReplacePrev!=undefined&&isReplacePrev){ for(var i=0;i<prevUrl.length;i++){ var j = prevUrl[i].indexOf("site/"+thisAction); if(j==-1){ j = prevUrl[i].indexOf("user/"+thisAction); } if(j>-1){ prevUrl.splice(i, prevUrl.length - i); prevUrl[prevUrl.length] = thisUrl; break; } } index = $.inArray(thisUrl,prevUrl); if(index==-1){ prevUrl[prevUrl.length] = thisUrl; } }else if(index==-1){ prevUrl[prevUrl.length] = thisUrl; } }else{ prevUrl = [thisUrl]; } sessionOrCookieStoragePut("prevUrl",JSON.stringify(prevUrl));}//返回上一页function prevBackFun(thisUrl,defaultUrl){ thisUrl = thisUrl.replace(/%2F/g,"/"); var prevUrl = sessionOrCookieStorageGet("prevUrl"); if(prevUrl==null||prevUrl==undefined){ // sessionOrCookieStoragePut("prevUrl",JSON.stringify([])); location.href = defaultUrl;//缺省跳转地址 return; } prevUrl = JSON.parse(prevUrl); if(prevUrl.length<=1){ location.href = defaultUrl;//缺省跳转地址 return; } var index = $.inArray(thisUrl,prevUrl); if(index!=-1){ var url = prevUrl[index-1];//得到要返回的URL //返回前删除这个url // prevUrl.splice(index-1,prevUrl.length-index-1); // sessionOrCookieStoragePut("prevUrl",JSON.stringify(prevUrl)); location.href = url; return; }else{ // sessionOrCookieStoragePut("prevUrl",JSON.stringify([])); location.href = defaultUrl;//缺省跳转地址 return; }}
以上代码我是放在yii2上使用的
thisUrl则用的的Yii:$app->request->url;
thisAction用的Yii:$app->controller->action->id;
在需要用到返回的页面一开始就调用调用
prevBackSet(thisUrl,thisAction,isReplacePrev); //函数
//在返回的按钮上调用<pre code_snippet_id="1953717" snippet_file_name="blog_20161028_2_1854162" name="code" class="javascript">prevBackFun(thisUrl,defaultUrl);
0 0
- web自定义返回功能
- android自定义带返回功能的标题
- iOS-自定义导航栏后侧滑返回功能失效
- iOS-自定义导航栏后侧滑返回功能失效
- iOS-自定义导航栏后侧滑返回功能失效
- 自定义返回按钮后,右滑返回功能失效解决方法
- web services返回自定义的对象
- Java Web:自定义验证码功能
- 10g 自定义功能为WM_CONCAT的函数,返回CLOB
- 手机移动端web 禁止手机返回功能
- 【web布局】点击按钮返回页面顶部的功能实现
- web工程中友好的自定义错误返回页面
- ios7之后自定义返回按钮后,右滑返回功能失效解决方法
- ios7自定义返回按钮后,右滑返回功能失效解决方法
- iOS 自定义返回按钮,仍实现右滑返回的功能.
- 自定义nav返回按钮后,自带的右滑返回功能失效解决方法
- android中加载webview自定义的返回键具有返回上一页的功能
- iOS 为自定义返回按钮leftBarButtonItem的页面添加右滑返回功能
- Linux下文件夹的作用,学一条总结一条
- VMware “Transport(VMDB)error -44:Message”
- 第10周项目1- 二叉树算法库
- 电脑开机后鼠标右键点击桌面图标反应很慢,要等上1分钟左右右键内容才能出来怎么办?
- MySQL的增删改查
- web自定义返回功能
- tomcate启动maven项目首页404问题
- 再谈重载与覆盖
- python学习笔记
- 5步搞定android混淆
- 第九周项目一 猴子选大王
- h5表单基本属性
- 操作系统笔记
- C语言sizeof和strlen