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+如下返回空的字符串
• 跨域

本文同步分享在 博客“行舟客”（CSDN）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。