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