JavaScript中document.referrer的用法详解


Posted in Javascript onJuly 04, 2017

前言

在JavaScript中,document对象有很多属性,其中有3个与对网页的请求有关的属性,它们分别是URL、domain和referrer。

URL属性包含页面完整的URL,domain属性中只包含页面的域名,而referrer属性中则保存着链接到当前页面的那个页面的URL。

前面两个很好理解,而referrer属性简单来说就是上一个页面的URL。那么这个属性具体有什么用处呢?

在H5页面中,我们经常要在头部加个返回上一个页面按钮,就像下面这样的:

JavaScript中document.referrer的用法详解
页面头部

点击左侧的元素可以返回到上一个页面,我们可以简单写一段JS代码:

var back = document.getElementById('back'); //假设该返回按钮元素id为back
back.onclick = function(){
 history.back(); //返回上一个页面,也可以写成history.go(-1)
};

或者有个更简单的方式,不用写这么多JS,只需直接用a标签表示该返回按钮元素:

<a id="back" href="javascript:history.back();" rel="external nofollow" ></a>

咦?上面说了这么多,还是没有说到document.referrer有什么用呀!别急,前面只是铺垫,接下来步入正题~~~

虽说感觉上面这样已经基本上实现了返回上一页的功能,但是有一种情况没有考虑到(我们程序员还是要严谨一点嘛),就是假如该页面是别人分享过来的而不是通过其他页面进入的呢?那么点击该按钮将不会有任何反应,因为此时history对象中不存在历史记录,也就是说这是你浏览器窗口打开时浏览的第一个页面。

为了优化用户体验,这里通常有两种解决方案。一种是在打开第一个页面时不显示返回上一页按钮,另一种是点击直接跳转到网站首页,这可以根据产品需求来选择合适的方案。

这里假设选择第一种方案,我们可以这样写段JS:

if(document.referrer){
 back.style.display = 'block'; //默认让其隐藏,当referrer属性不为空时让其显示
}

结束语

其实判断当前页面是否是用户一开始打开的页面,方法也不止通过判断referrer属性这一种方法,还可以通过history.length是否为零来判断。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
基于hover的用法实例(推荐)
Jul 04 #Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 #Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 #Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 #Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 #Javascript
JS全角与半角转化实例(分享)
Jul 04 #Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 #Javascript
You might like
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
php集成开发环境详解
2019/09/24 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
在Python中使用模块的教程
2015/04/27 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
python实现rsa加密实例详解
2017/07/19 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
centos7之Python3.74安装教程
2019/08/15 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
python实现简单学生信息管理系统
2020/04/09 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
巴西女装购物网站:Eclectic
2018/04/24 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
生产部管理制度
2014/01/31 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
试用期辞职信范文
2015/03/02 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript