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 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
XENON基于JSON变种
Jul 27 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
angular4实现带搜索的下拉框
Mar 25 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
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
github配置使用指南
2014/11/18 Python
python抓取文件夹的所有文件
2018/02/27 Python
查看Django和flask版本的方法
2018/05/14 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
python批量处理txt文件的实例代码
2020/01/13 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
大数据分析用java还是Python
2020/07/06 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
PHP面试题及答案二
2015/05/23 面试题
Python的两道面试题
2013/06/29 面试题
公务员的自我鉴定
2013/10/26 职场文书
文案策划求职信
2014/04/14 职场文书
代领报检证委托书范本
2014/10/11 职场文书
作文评语怎么写
2014/12/25 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python