当前位置: 首页 > news >正文

java referrer_JavaScript中document.referrer的用法详解

前言

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

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

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

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

7760640e4b584bcf24e4fee63cb6de15.png

页面头部

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

var back = document.getElementById('back'); //假设该返回按钮元素id为back

back.onclick = function(){

history.back(); //返回上一个页面,也可以写成history.go(-1)

};

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

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

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

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

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

if(document.referrer){

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

}

结束语

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

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

相关文章:

  • java代码压缩文件_使用Java代码压缩文件或文件夹
  • 石子合并 动态规划 java_动态规划:圆形石子合并问题
  • java修饰方法_Java 修饰符
  • arduino timer频率_Arduino利用TimerOne库产生固定频率和占空比的方波
  • flask数据库mysql增删查改_flask_sqlalchemy简单增删查改操作
  • java基础语法的意义_关于java基础语法的学习笔记
  • java中容器试题_Java最常见208道面试题_容器
  • java 开启线程扫描程序_当多个线程在Java中使用System.in上的扫描仪...
  • java中结构体实现_JAVA中如何实现C中的结构体数组的功能?
  • java nio close_wait_Java NIO 操作总结
  • java zmq订阅_java zmq消息队列
  • java按键数据库添加_详解Java MyBatis 插入数据库返回主键
  • java ee jdbc_JavaEE JDBC 补充注意点
  • java 返回前台excel_Java后台读取excel表格返回至Web前端
  • eclipse for java web_【Javaweb】Eclipse for JavaEE新建的Web工程自动生成web.xml
  • 【Under-the-hood-ReactJS-Part0】React源码解读
  • 2017 年终总结 —— 在路上
  • ABAP的include关键字,Java的import, C的include和C4C ABSL 的import比较
  • Angular 响应式表单 基础例子
  • FastReport在线报表设计器工作原理
  • HashMap ConcurrentHashMap
  • JDK9: 集成 Jshell 和 Maven 项目.
  • JS创建对象模式及其对象原型链探究(一):Object模式
  • JS题目及答案整理
  • mysql 数据库四种事务隔离级别
  • nodejs:开发并发布一个nodejs包
  • Otto开发初探——微服务依赖管理新利器
  • Traffic-Sign Detection and Classification in the Wild 论文笔记
  • Twitter赢在开放,三年创造奇迹
  • win10下安装mysql5.7
  • 记录一下第一次使用npm
  • 扑朔迷离的属性和特性【彻底弄清】
  • 前端设计模式
  • 容器服务kubernetes弹性伸缩高级用法
  • 微信小程序:实现悬浮返回和分享按钮
  • 小程序01:wepy框架整合iview webapp UI
  • ​LeetCode解法汇总2182. 构造限制重复的字符串
  • ​Linux·i2c驱动架构​
  • #define、const、typedef的差别
  • #Linux(Source Insight安装及工程建立)
  • #中的引用型是什么意识_Java中四种引用有什么区别以及应用场景
  • $con= MySQL有关填空题_2015年计算机二级考试《MySQL》提高练习题(10)
  • (2)关于RabbitMq 的 Topic Exchange 主题交换机
  • (4)(4.6) Triducer
  • (C语言)输入自定义个数的整数,打印出最大值和最小值
  • (博弈 sg入门)kiki's game -- hdu -- 2147
  • (接口自动化)Python3操作MySQL数据库
  • (十八)用JAVA编写MP3解码器——迷你播放器
  • (转)eclipse内存溢出设置 -Xms212m -Xmx804m -XX:PermSize=250M -XX:MaxPermSize=356m
  • (转贴)用VML开发工作流设计器 UCML.NET工作流管理系统
  • (转载)Google Chrome调试JS
  • (最全解法)输入一个整数,输出该数二进制表示中1的个数。
  • **登录+JWT+异常处理+拦截器+ThreadLocal-开发思想与代码实现**
  • .bat批处理出现中文乱码的情况
  • .NET Core中的去虚