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应用于login页面的问题及解决
Oct 17 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
vue中render函数的使用详解
Oct 12 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
django实现用户登陆功能详解
2017/12/11 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
个人求职信范文分享
2014/01/06 职场文书
英语商务邀请函范文
2014/01/16 职场文书
综合实践活动方案
2014/02/14 职场文书
大学生励志演讲稿
2014/04/25 职场文书
针对吵架老公保证书
2015/05/08 职场文书
学前教育见习总结
2015/06/23 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
asyncio异步编程之Task对象详解
2022/03/13 Python