问题:今天在做项目的过程中,有一个需求是这样的:目前有一个公共的页面暂定为A页面,有几个列表页都需要跳转至A页面。然后,A页面也可以返回至上一个页面。
思考:
1、首先,我想到的是用 window.history.back(-1);直接返回上一个页面即可。但是,如果A页面下的二级页面跳回到了A页面,这个时候,我想跳转到上一个列表页面就跳不回去了。又会回到A页面下的子页面。这就陷入了一个循环。所以,这个方法不可行。
2、其次,我考虑是否可以把列表页的地址给他存起来,然后在A页面中去取这个地址,点击返回的时候,就可以返回上一个页面了。 如果有其他页面跳转至A页面,同样给他存储起来,这个时候,cookie中的值就变成了我们最新的值,然后点击返回就可以返回到最新跳转到A页面的上个页面了。 这种方法好像是可行的。尝试一下吧!
如何解决:
1、首先需要解决的问题是,如何获取当前页面的地址和参数
window.location.host; //返回url 的主机部分,例如:www.xxx.com
window.location.hostname; //返回www.xxx.com
window.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏),例如:www.xxx.com/index.php?class_id=3&id=2
window.location.pathname; //返回/a/index.php或者/index.php
window.location.protocol; //返回url 的协议部分,例如: http:,ftp:,maito:等等.
window.location.port //url 的端口部分,如果采用默认的80端口,那么返回值并不是默认的80而是空字符 <br><br><br>来源:http://www.daimajiayuan.com/sitejs-17210-1.html
这里同样有一个JS方法,可以获取到我们想要的关于页面地址的所有
/**
* 获取项目名称
**/
function getProjectName() {
var strPath = window.document.location.pathname;
var postPath = strPath.substring(0,strPath.substr(1).indexOf('/')+1);
return postPath;
}
/**
* 获取项目全路径 如http://localhost:8080/video_learning
* */
function getBasePath(){
//获取当前网址
var curWwwPath=window.document.location.href;
//获取主机地址之后的目录
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//获取地址到端口号
var localhostPath=curWwwPath.substring(0,pos);
//项目名
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return (localhostPath+projectName);
}
function getImgPath(){
//获取当前网址
var curWwwPath=window.document.location.href;
//获取主机地址之后的目录
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//获取地址到端口号
var localhostPath=curWwwPath.substring(0,pos);
//项目名
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
if("win"==os){
return localhostPath + projectName;
}else{
return localhostPath;
}
}
/**
* 获取当前URL的参数
* */
function getUrlArgStr(){
var q=location.search.substr(1);
var qs=q.split('&');
var argStr='';
if(qs){
for(var i=0;i<qs.length;i++){
// argStr+=qs[i].substring(0,qs[i].indexOf('='))+'='+qs[i].substring(qs[i].indexOf('=')+1)+'&';
argStr+=qs[i].substring(0,qs[i].indexOf('='))+'='+qs[i].substring(qs[i].indexOf('=')+1);
}
}
return argStr;
}
总结一下:我们需要获取两部分内容。第一个是项目的名称,名称是动态的不能写死。第二个是除去名称之外的全路径(包含了携带的参数)。
可以通过如下代码获取到:
getBasePath() // 获取到项目全路径 如:http://localhost:8080/video_learning
window.location.href; //获取整个url字符串(在浏览器中就是完整的地址栏),例如:www.xxx.com/index.php?class_id=3&id=2
2、我们看到window.location.href获取到的是整个url全路径,那么我们需要去掉端口号和项目名。
var contextPath = contextPath();
window.location.href.replace(contextPath,"")
3、这个时候我们获取到了出去端口号和项目名的剩余部分。接下来我们需要把当前的字符串存放到cookie中。
这里有一个问题需要注意:因为cookie存放量只有4KB左右,所以如果我们携带的参数过多,就会存不进去了。所以我们最好用localStorage和sessionStorage进行存储。
例如:
var httpPath = window.location.href.replace(contextPath,"");
localStorage.setItem("getHttpPath", httpPath);
4、此时我们只需要在A页面去取值,然后重组为地址跳转即可。
contextPath:使我们的项目端口号+项目名
localStorage.getItem("getHttpPath"): 使我们存放的上一个页面的项目地址
例如:
// 返回上一页面(获取的跳转路径)
window.location= contextPath + localStorage.getItem("getHttpPath");
到此,就可以实现这个功能啦!在此记录一下,好记性不如烂笔头!