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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
js模拟微博发布消息
Feb 23 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
基于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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP漏洞全解(详细介绍)
2012/11/13 PHP
详解js异步文件加载器
2016/01/24 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
vue项目实战总结篇
2018/02/11 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
js实现验证码功能
2020/07/24 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
Python格式化日期时间操作示例
2018/06/28 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
Python类的继承super相关原理解析
2020/10/22 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
信息系统专业个人求职信范文
2013/12/07 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
趣味运动会简讯
2015/07/20 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
在CSS中使用when/else的方法
2022/01/18 HTML / CSS