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


Posted in Javascript onFebruary 22, 2017

返回上一页,在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 = 'https://3water.com'; 
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 的情况,还没有很好的方法,尽量避免吧。

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

Javascript 相关文章推荐
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 #Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 #Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 #Javascript
JavaScript实现256色转灰度图
Feb 22 #Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 #Javascript
微信小程序 扎金花简单实例
Feb 21 #Javascript
angular中的http拦截器Interceptors的实现
Feb 21 #Javascript
You might like
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
Python3实现的字典遍历操作详解
2018/04/18 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
python实现统计代码行数的小工具
2019/09/19 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
Python魔术方法专题
2020/06/19 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
python元组拆包实现方法
2021/02/28 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
项目管理计划书
2014/01/09 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
农村党员一句话承诺
2014/05/30 职场文书
工作说明书格式
2014/07/29 职场文书
个人贷款收入证明
2014/10/26 职场文书
2014年项目工作总结
2014/11/24 职场文书
出国签证在职证明范本
2014/11/24 职场文书
学习党章心得体会2016
2016/01/15 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
关于感恩的作文
2019/08/26 职场文书