JS获取上一访问页面URL地址document.referrer实践

一、JS获取前一个访问页面的URL地址document.referrer

要获取前一个访问页面的URL地址前后端语言都可以,例如PHP的是$_SERVER['HTTP_REFERER'],JavaScript的就是document.referrer

我们平常开发,虽然和URL打交道也算比较频繁,但是,似乎很少使用document.referrer。我起初以为是兼容性不好,后来测试发现ie7都支持,那就奇怪了,为何document.referrer用的不多呢?

我想了一下,可能有下面几个原因:

  1. 后端小伙伴帮我们搞定了相关需求;
  2. 只有一些访问数据统计脚本才非常在意上一个访问页面的url地址是什么;
  3. 如果我们希望实现的功能是返回上一页,可以使用history.go(-1)或者history.back(),我们并不需要知道上一个访问页面具体的地址是什么。

综合以上几点,导致平时开发很少使用document.referrer

但是最近做了一个移动端项目,是我第一次在正式项目中使用document.referrer,这里跟大家分享一下相关的实践。

场景是这样的,移动端无论是原生app还是传统的网页,返回上页是一个比较强烈的需求,如下截图所示:
返回上一页截图示意

几乎所有的内页都有这么一个返回上一页的按钮,例如这个页面(点击体验)

此返回上一页相关HTML代码如下:

<a href="javascript:history.go(-1)" class="header-back jsBack">返回</a>

在大部分场景下,上面办法可以满足我们的交互需求,但是,在有些时候,上面的代码就有些心有力而气不足,因为当前页面的referrer并不总是存在的。

比方说用户是通过微信分享进来的,直接进入了内页,此时是没有上一页的,返回按钮再怎么点击都没有任何反应,就会让用户很奇怪,十有八九会认为是实现了bug,则会让用户对产品的品质抱有疑虑,那问题可就大了。

怎么办呢!后来我想了一招,那就是如果发现浏览器没有上一页来源信息,我们就把返回按钮的链接改成首页的链接地址,这样无论什么时候,用户点击返回按钮一定是会有反应的,并且返回首页从逻辑上讲也是合情合理的。而这里判断是否有没有来源信息就是使用这里的document.referrer,当浏览器得不到上一页的来源信息的时候,document.referrer的返回值就是空字符串'',于是乎,就有类似下面的代码:

if (document.referrer === '') {
    // 没有来源页面信息的时候,改成首页URL地址
    $('.jsBack').attr('href', '/');
}

于是乎,返回按钮的逻辑就天衣无缝了。

二、哪些场景下无法获得上一页referrer信息

  1. 直接在浏览器地址栏中输入地址;
  2. 使用location.reload()刷新(location.href或者location.replace()刷新有信息);
  3. 在微信对话框中,点击链接进入微信自身的浏览器;
  4. 扫码进入QQ或者微信的浏览器;
  5. 直接新窗口打开一个页面;
  6. 从https的网站直接进入一个http协议的网站(Chrome下亲测);
  7. a标签设置rel="noreferrer"(兼容IE7+);
  8. meta标签来控制不让浏览器发送referer

    例如:

    <meta content="never" name="referrer">

    兼容性如下图:
    meta中的referrers兼容性截图

    iOS浏览器目前还是使用的老版本的规范值,包括:never, always, origin, default。对于Android浏览器,5.0版本开始支持。基本上,在移动端,使用meta标签来控制referer信息的发送与否已经可以在实际项目中使用了。

  9. 等等。

有人可能迫切想知道如何让从https的网站直接进入一个http协议的网站也有document.referrer信息,这方面并不是我擅长的地方,所以我也不清除应该如何解决此问题,或许需要服务器配置那边配合点什么。

更新于翌日
下面是小新同行的真知灼见:

HTTPS turns off HTTP Referrers to HTTP websites. (默认是关闭的,安全原因。)
开启的话在meta里设置,可能现在的流行的最新版浏览器兼容会好点!
参考:

http://smerity.com/articles/2013/where_did_all_the_http_referrers_go.html

官方这么说的:

https://www.w3.org/Protocols/rfc2616/rfc2616-sec15.html#sec15.1.3

三、结束语

明天情人节,买了巧克力,订了法式大餐,有法式蜗牛,第一次吃,心里总有点毛毛的,让我想起来贝爷,该不会也是那种画风吧。

贝爷吃东西

平时和同事一起吃饭的时候,会传授自己和夫人的相处之道。

很重要的一点就是相敬如宾,大家平等,比方说:当意见不合的时候就听老婆的,当意见统一的时候就听我的。

我也有婆媳问题,我以前的做法是在老婆面前说我妈不是这样的,巴拉巴拉,有用吗,收效甚微,后来我聪明了,一旦老婆大人不开心了,我马上附和:“就是啊,我妈怎么这样啊,在想些什么呢,太离谱了,我这个儿子都看不下去……”,嘿,你别说,只要这么一附和,老婆立马心里就爽了,生气嘛都是生的情绪,你一顺,这态度立马就会转变:“你也别这么说,你妈其实我知道的,就是……我也不是……”,对吧,一下子什么事情就没有,风和日丽,阳光明媚。我呢也可以继续开开心心钓鱼,家和万事兴。

哦呵呵,希望明天一切顺利,明天没得午觉睡了,所以今天要早点休息,12点之前一定要盖上被子。

也祝大家明天节日快乐!

曾经我也是也是一只单身狗,就像下面这样:

单身狗

是前端改变了我的人生。所以,前端在手,美人我有!只要前端学得好,女朋友她跑不了!

(本篇完)

分享到:

标签: , , , , , ,

赞助商广告(我也要赞助)



发表评论(目前31 条评论)

  1. 胖仔说道:

    这个对单页应用,如果使用的是hash, hash变化 document.referrer 不会发生变化的

  2. cityheart说道:

    js圆周运动

    *{ margin:0; padding:0; }
    html,body{ width: 100%; height: 100%; overflow: hidden; }
    .xline{ height: 1px; width: 100%; background:#ccc; position: fixed; top: 50%; left: 0; }
    .yline{ width: 1px; height: 100%; background:#ccc; position: fixed; left: 50%; top: 0; }
    .big-box{ position: fixed; width: 250px; height: 250px; border-radius: 50%; left: 50%; top: 50%; margin:-125px 0 0 -125px; background: rgba(33,33,33,0.1); }
    .box{ position:absolute; left: -25px; top: 50%; margin-top: -25px; width: 50px; height: 50px; background:rgba(33,33,33,0.5); border-radius: 50%; }
    .control{ position: fixed; width: 100px; height: 35px; border-radius: 5px; background: #e3e3e3; color: #333; left: 55%; bottom: 5%; border: solid 1px #ccc; cursor: pointer; outline: none;}

    开始

    $(document).ready(function(){
    var deg = 0, r = $(window).width()/2-$(‘.box’).offset().left-$(‘.box’).width()/2;
    function circleAnimation(deg){
    var x = Math.cos(deg*Math.PI/180)*r, y = Math.sin(deg*Math.PI/180)*r;
    $(‘.box’).css({
    ‘left': r-x-$(‘.box’).width()/2,
    ‘top': r-y
    });
    }
    var animation;
    $(‘.control’).toggle(function(){
    animation = setInterval(function(){
    deg += 1;
    if(deg >= 360){
    deg = 1;
    }
    circleAnimation(deg);
    },20);
    $(‘.control’).text(‘暂停’);
    },function(){
    clearInterval(animation);
    $(‘.control’).text(‘开始’);
    });
    });

  3. Circle说道:

    iOS 里面 history.go() 不会刷新 怎么解决呀? 在安卓里面 可以刷新的。

  4. saber说道:

    哇 你竟然撒狗粮

  5. r91说道:

    通过文章的连接调到《完美人生》这个页面点击返回没反应

  6. 海带丝阿飞说道:

    实际业务中还要加入更多的判断
    1. 如果用户是从A网站点击了一个链接跳转到B网站的某个内页, 业务上肯定是希望点击返回跳转到B网站的首页, 但是go(-1)就跳回A网站了
    2. 如果用户在内页进行某个进一步操作的时候需要登录, 登录完毕后自动跳转回原来的内页, 作为已经登录的身份在内页点击返回再回到登录页面也是不符合业务需要的

  7. 酷酷的大米说道:

    张大神,如果说原生app内跳转web页面,使用document.referrer能获取前一个页面的来源吗? 场景:原生app跳转我的页面,点击关闭直接返回,如果是web跳转我的页面,返回上一页

  8. 爱哭的小孩说道:

    意见不合听老婆的,意见统一听我的!

  9. stack overflow说道:

    typeof document.referrer === ” 返回false

  10. 流浪的小灰羊说道:

    typeof document.referrer === ”
    是不是写错了啊,印象中typeof 不再存在返回‘’的啊……
    document.referrer === ” 这样吧?

  11. 茄子说道:

    赞!

  12. 技术汪说道:

    看了前面技术部分还挺嗨的,结果一不小心被强行塞了狗粮。不是我军不谨慎,实在敌军太狡猾

  13. 回到过去说道:

    我以前都是用history.length做判断的

  14. 小蛮腰说道:

    整篇文章精华中的精华就在于如何与夫人相处!

  15. 容颜说道:

    高智商与高情商并存,这样的男生请给我来一打…

  16. 思嘉说道:

    最近也在用,看了以后更上一层楼

  17. tians说道:

    边笑边学!棒!。对了,博主可否把书城前端页面源码部分公开呢?

  18. bestRenekton说道:

    鱼哥 把你所有的文章都看完了,,感觉像看完了小说等更新,,有时习惯性的点开却发现没有更新,感觉心里空荡荡的。。。。

  19. 不二很纯洁说道:

    “9.等等。
    有人可能迫切想知道如何让从https的网站直接进入一个http协议的网站也有document.referrer信息,这方面并不是我擅长的地方,所以我也不清除应该如何解决此问题,或许需要服务器配置那边配合点什么。”

    我也不清除应该=>我也不清楚应该

  20. 有容乃大说道:

    前端在手,美人我有??????

  21. AlphaTr说道:

    https 跳转 http referrer 的问题可以看看 Referrer Policy 的相关内容,应该现代浏览器都支持

  22. 小新说道:

    HTTPS turns off HTTP Referrers to HTTP websites. (默认是关闭的,安全原因。)
    开启的话在meta里设置,可能现在的流行的最新版浏览器兼容会好点!
    参考:
    http://smerity.com/articles/2013/where_did_all_the_http_referrers_go.html
    官方这么说的:
    https://www.w3.org/Protocols/rfc2616/rfc2616-sec15.html#sec15.1.3

  23. roming说道:

    这条狗好熟悉啊

  24. meepo说道:

    typeof document.referrer === ”

    是不是

    document.referrer === ”

  25. GreatDujw说道:

    NBility

  26. eddiexxxx说道:

    只要前端学得好,女朋友她跑不了!lol~

  27. 一亿燚说道:

    沙发!