document.referrer的用法

在PC端我们可以使用 history.go(-1)或者history.back()返回到上一页。这样，我们不需要知道上一页的 url 具体是什么，只要使用 history 即可，一般都没什么问题。

但是在移动端，如果想要返回上一页。比如从A页面跳到B页面，如果B页面想返回A页面，为了防止不会跳错，必须要有一个返回按钮，给它加 history.go(-1) ，返回上一层。

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

如果我们没有返回上一页的按钮，在手机上怎么操作才会返回上一页，比如：从微信分享进来的页面，进入的是微信内页，此时，内页就是第一页，它没有上一页，要怎么返回？这时点返回按钮是没有反应的，会让用户对产品的品质抱有疑虑，会被误以为是BUG。那问题可就大了。

javascript 有一个可以获取前一页面的URL地址的方法：document.referrer

document.referrer 的来源

referrer 属性可返回载入当前文档的文档的 URL.如果当前文档不是通过超级链接访问的，则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。 referrer是由客户端的浏览器发送到服务器上，且在客户端可通过document.referrer来获取。

浏览器在向server请求页面A的时候，会发送HTTP请求。这个请求的Header里会带上Referer属性，server接收到该请求后，可以提取出Header里的Referer，用于判断访客是从哪个页面发起的请求。

一般情况下浏览器请求A时发送的Header中Referer是什么，那么拿到A页面后document.referre的值就是什么。 如果在Header中不包含Referre，那么用document.referre去取的时候，就会被赋值为空字符串。

document.referrer 的兼容性

document.referrer IE7都支持，它的兼容性比较高，Android 5.0开始支持，iOS都支持，PC端浏览器从IE7就开始支持了，兼容性没有什么大的问题。

document.referrer 如何解决移动端从App内部跳转到App外部后，返回上一页的问题

就拿上面的微信分享的问题来说，既然点击上一页没有反应，就让它返回首页，从首页再进入其它子页面。我们就把返回按钮的链接改成首页的链接地址，这样无论什么时候，用户点击返回按钮一定是会有反应的，并且返回首页从逻辑上讲也是合情合理的。而这里判断是否有没有来源信息就是使用这里的document.referrer，当浏览器得不到上一页的来源信息的时候，document.referrer的返回值就是空字符串''，类似代码如下：

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

这样，当再次点击返回按钮时，就可以返回首页了。