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继承 Base类的源码解析
Dec 30 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
JavaScript 事件系统
Jul 22 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
vue 组件高级用法实例详解
Apr 11 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
vscode中使用npm安装babel的方法
Aug 02 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上传图片存入数据库示例分享
2014/03/11 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP文件与目录操作示例
2016/12/24 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
浅谈React高阶组件
2018/03/28 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
运动会表扬稿大全
2014/01/16 职场文书
小学班主任寄语大全
2014/04/04 职场文书
英语教研活动总结
2014/07/02 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书