移动端返回上一页,刚需!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 的情况,还没有很好的方法,尽量避免吧。

原文地址:https://www.cnblogs.com/lanlanlan00/p/8461230.html

时间: 2024-10-10 22:25:29

移动端返回上一页,刚需!document.referrer 详解的相关文章

万能返回上一页,兼容移动端跟电脑

/*返回上一页*/ function return_prepage() { if(window.document.referrer==""||window.document.referrer==window.location.href) { window.location.href="{dede:type}[field:typelink /]{/dede:type}"; }else { window.location.href=window.document.ref

返回上一页代码区别:

window.history.go(-1);  //返回上一页 window.history.back();  //返回上一页 replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过"前进"和"后退"来访问已经被替换的URL. 语法: location.replace(URL) 在 实际应用的时候,重新刷新页面的时候,我们通常使用: location.reload() 或者是 history.go

微信浏览器自带的返回上一页的停留位置 scrollTop

我们做过微信的应该都知道,微信自带的返回上一页,就是重新打开页面.并不是返回历史页面.我们PC端的浏览器是返回历史页面.点击返回页面之后 上一个页面的scrollTop还是之前没有进入新页面的位置. 我看了下京东的微信网站.果然和我想到的方法一样.利用sessionStorage HTML5本地存储 进行存储位置scrollTop以及加载了多少次ajax次数 微信返回上一页(当前页面)之后.就会onload一下.设置最后一次scrollTop的值.以及一次性通过ajax传递之前加载的次数size

js 返回上一页和刷新以及页面跳转

1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: <a href="javascript:history.go(-1);">向上一页</a> response.Write("<script

点击返回上一页代码实例

点击返回上一页代码实例:在网页中,经常见到这么一个效果,点击一个按钮.文本或者图片可以返回上一步所浏览的网页,下面就给出代码实例,希望能够给需要的朋友带来帮助,代码实例如下:一.点击按钮返回上一页: <input type="button" onclick="javascript:history.back(-1);" value="返回上一页" /> 二.点击图片返回上一页: <img src="images/bt.j

js返回上一页的方法

返回上一页的方法一: <a href="javascript:history.go(-1)">返回</a>

使用angularjs、ionic框架如何实现返回上一页并刷新

普通的js返回并刷新这里就不多说了,百度就有很多方法. 下面说的是使用了angularjs.ionic开发的一个手机app中使用的一个返回上一页并刷新的方法. 场景:回复的页面是单独的,点击保存回复后会回到上一个页面,此时上一个页面会显示出你新回复的内容 回复页面的controller的相关代码: $scope.save = function () { Replies.giveAReply($scope.reply); //保存回复 $ionicHistory.goBack(); //返回上一页

返回上一页代码

<a href="javascript:;" onclick="javascript:cliccc(click)" style="position: fixed;right:10px;top:50px">返回上一页</a><script language="JavaScript"> function cliccc(click){setTimeout("history.go(-1)&

js返回上一页并刷新的多种方法

js返回上一页并刷新的几种方法.参考链接:http://www.jbxue.com/article/11230.html <a href="javascript:history.go(-1)">返回上一页</a><a href="javascript:location.reload()">刷新当前页面</a><a href="javascript:" onclick="history