欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js中document.referrer实现移动端返回上一页

程序员文章站 2023-12-01 22:09:46
返回上一页,在pc端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层。这样,我们不需要上一页的 url 具体是什么,只要使用...

返回上一页,在pc端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层。这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问题。

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

<a href="javascript:history.go(-1)" rel="external nofollow" 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 = '//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做法

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

1.根据 document.referrer 的来源来判断是否有来源信息,如果没有,则返回首页:

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

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

2.根据 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. 跨域

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

怎么解决无法获取 referrer 的情况,还没有很好的方法,尽量避免吧。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!