JavaScript处理页面跳转与返回的路径问题

今天思考了一个问题：如何判断页面是否是从特定页面“跳”过来的？
因为我做的一个项目中有一个（二级）页面要返回主页面。

一般情况下，直接history.go(-1); 或 history.back(); 即可。

但若是用户直接来到这个（二级）页面呢？怎么去主页面？或者说，它又“返回”到哪去？
这就是图中那句话的意思——当时的无奈之举，也是笔者写这篇博客的原因。

---

在同源条件下，可以在特定页面里存储一个sessionStorage ，

window.function(){
	sessionStorage.setItem('key','mxc');
}

然后在其他页面开始加载的时候去获取这个sessionStorage。若能获取到，则表明它是从特定页面跳转来的，并立刻删掉这个sessionStorage，以便下次判断：

window.function(){
	if(sessionStorage.getItem('key')!==null){
		sessionStorage.removeItem('key');
		history.back();
	}else{
		window.location.href="/路径（URI中“带层次的文件路径”那部分）/";
	}
}

---

还可以使用 document.referrer —— js中获取“前一页面URL地址”的方法。

若是从地址输入框输入链接方式打开的页面，其document.referrer为""。

所以，我们可以这么做：

function ClickBack(){
	if(!document.referrer || document.referrer.indexOf("你要返回的路径")===-1){
		window.location.href="/路径（URI部分）/";
	}else{
		history.back();
	}
}

这完全可以用在如下业务需求里：

1. 复制链接或者QQ中在浏览器中新打开的链接，点击“返回”跳转到列表页；
2. 从列表页链接调整进的店“返回”执行浏览器的“返回”动作，好处是能直接定位到列表页上次浏览的位置。

---

注意，下面的场景无法获得 referrer 信息 ：

• 直接在浏览器中输入地址
• 使用location.reload()刷新（location.href或者location.replace()刷新信息）
• 在微信对话框中，点击进入微信自身浏览器
• 扫码进入微信或QQ的浏览器
• 直接新窗口打开一个页面
• 从https的网站直接进入一个http协议的网站（可以避免：<meta name="referrer" content="always">）
• a标签设置rel=“noreferrer”（兼容IE7+）
• meta标签来控制不让浏览器发送referer：<meta name="referrer" content="never">
• 点击 flash 内部链接
• Chrome4.0以下，IE 5.5+以下返回空的字符串
• 跨域