JS如何判断是从哪个页面跳转过来的？

问题：今天在做项目的过程中，有一个需求是这样的：目前有一个公共的页面暂定为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");

到此，就可以实现这个功能啦！在此记录一下，好记性不如烂笔头！