移动端返回上一页，刚需！document.referrer 详解

返回上一页，在PC端咱们可使用：history.go(-1)或者history.back()，能够正常返回第一层。这样，咱们不须要上一页的 url 具体是什么，只要使用 history 通常都没啥问题。

 

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

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

 

那若是咱们没有返回上一页的 < 的按钮，在手机上怎么操做才会返回上一页，好比：从微信分享进来的，进入的是微信内页，此时，内页就是第一页，它没有上一页，要怎么返回？这时点返回按钮是没有反应的，不是一个好的用户体验，十有八九的人会误觉得是BUG，这绝对是个坑爸的问题。

移动端不管是原生app仍是传统的网页，返回上页是一个比较强烈的需求。

 

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

document.referrer 的来源

1. referrer 属性可返回载入当前文档的文档的 URL【摘自W3CSHCOOL】, 若是当前文档不是经过超连接访问的，那么当前文档的URL为NULL，这个属性容许客户端的 javascript 访问 HTTP 头部；
2. referrer 属性，咱们能够从 http 头部获取

document.referrer 的兼容性

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

可是有个小小的问题，就是 IE 会主动清除 referref 属性。在IE中用javascript作跳转，好比用window.location.href = “”; google若是使用document.referrer没法取到浏览器请求的HTTP referrer，由于IE清空了。而其余主流浏览器Firefox和Chrome都会保留referrer，没办法，只好判断，若是是IE浏览器，就主动给它增长一个 referrer 。这样的原理就是给IE浏览器的页面偷偷加了个连接，而后自动点这个连接，因而referrer就能保留了。

var url = 'http://www.jb51.net';   
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent) || /MSIE(\d+\.\d+);/.test(navigator.userAgent))   
{   
    var referLink = document.createElement('a');   
    referLink.href = url;   
    document.body.appendChild(referLink);   
    referLink.click();   
}   
else  
{   
    location.href = url;   
}  

document.referrer 的牛X作法

解决移动端返回上一页的问题，就是上面所说的微信分享的问题？根据【张鑫旭】大神的方法是，既然点击上一页没有反应，就让它返回首页，从首页再进入其它子页面，应该没啥问题。

• 根据 document.referrer 的来源来判断是否有来源信息，若是没有，则返回首页：

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

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

• 根据 document.referrer 的来源url 是否为网站的 url，若是判断这个 url 的来路有问题，则屏蔽该 url 下的全部信息，好比不让其显示图片等。能够有效的防止盗链，目前百度统计，google ads统计，CNZZ统计，都是用的这个方法。

 

没法获取 referrer 信息的状况

下面的场景没法得到 referrer 信息，如下前8条属于【张鑫旭】：

1. 直接在浏览器中输入地址
2. 使用location.reload()刷新（location.href或者location.replace()刷新有信息）
3. 在微信对话框中，点击进入微信自身浏览器
4. 扫码进入微信或QQ的浏览器
5. 直接新窗口打开一个页面
6. 从https的网站直接进入一个http协议的网站（Chrome下亲测）
7. a标签设置rel="noreferrer"（兼容IE7+）
8. meta标签来控制不让浏览器发送referer
9. 点击 flash 内部连接
10. Chrome4.0如下，IE 5.5+如下返回空的字符串
11. 使用 修改 Location 进行页面导航的方法，会致使在IE下丢失 referrer，这多是IE的一个BUG
12. 跨域

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

     

怎么解决没法获取 referrer 的状况，尚未很好的方法，尽可能避免吧。

原文：http://www.cnblogs.com/baiyygynui/p/6426621.html