当前位置:首页 > 日记 > 正文

JavaScript中document.referrer的用法详解

JavaScript中document.referrer的用法详解

前言

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

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

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

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

页面头部

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

var back = document.getElementById('back'); //假设该返回按钮元素id为backback.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是否为零来判断。

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

相关文章

个性情侣签名一男一女逗比最新版一

个性情侣签名一男一女逗比最新版一

一女,情侣,个性,最新版,个性签名,  个性签名丰富多彩,反映出网民的不同的思想、心情等,透过个性签名折射出当代网民的文化心理,下面是个性情侣签名一男一女逗比,希望你喜欢。个性情侣签名一男一女逗比【经典篇】既然选择了我,那就不要抛弃我…

ppt文件中插入柱形图图表的方法是

ppt文件中插入柱形图图表的方法是

文件,方法,图图,电脑软件,ppt,  PPT的使用是必不可少的,自然很多时候我们也会用到图表,以此来更清晰明了的展示数据。ppt文件中想要插入柱形图图表,该怎么设置?以下是小编为您带来的关于ppt文件中插入柱形图图表,希望对您有所帮助。ppt文件中…

excel表格将打印预览功能怎么添加

excel表格将打印预览功能怎么添加

工具栏,表格,功能,电脑软件,excel,  在excel中, 在打印预览界面看到的版面效果,就是实际打印输出后的实际效果;因此,通过打印预览,可以非常直观地检查版面是否符合要求。以下是小编为您带来的关于excel表格将打印预览功能添加到工具栏,希望对…

Excel2013中如何设置加密区域单元

Excel2013中如何设置加密区域单元

加密,区域,方法,单元格,如何设置,  平常在使用excel的时候我们都知道怎么给自己的表格设置密码,这样子的话只有知道密码的人才可以修改excel表格。那么如果我们不想给自己的表格加密,只想给部分的单元格设置密码,下面给大家分享Excel2013加…

WPS文字表格怎么设置增加宽度

WPS文字表格怎么设置增加宽度

文字,方法,设置,宽度,表格,  用表格制作客户资料,有ABCD个选项,有时候需要输入过多的文字,表格宽度不够,需要拉宽一些,应该如何来拉宽?下面小编以WPS这个软件为例子来详细说说:WPS文字表格增加宽度的方法。WPS文字表格增加宽度的方法打开表格,在…

ppt怎么恢复默认设置

ppt怎么恢复默认设置

恢复,方法,默认设置,电脑软件,ppt,  当我们在使用word文档一段时间过后,会发现很多设置都被更改了,如果不懂怎么弄就会变得很麻烦了。那么大家值得如何恢复默认呢?下面小编就给大家说说将word文档恢复默认设置的方法。ppt恢复默认设置的方法…

wps怎么设置文字方向为竖向wps文字

wps怎么设置文字方向为竖向wps文字

文字,设置,竖向,步骤,教程,  当我们用wps编辑文档时,有时候需要设置文字方向,那么wps文字方向怎么设置?wps文字方向怎么设置成竖向?下面小编教你怎么做。wps设置文字方向为竖向的步骤打开的wps界面,点击最左上角倒三角形,找到其中的格式;注意…

excel表格数据公式不生效如何解决

excel表格数据公式不生效如何解决

数据,公式,表格,如何解决,电脑软件,  excel表格中想要计算数据,但是发现公式并没有生效,数据也没有计算,该怎么解决这个问题。以下是小编为您带来的关于excel表格数据公式不生效,希望对您有所帮助。excel表格数据公式不生效1、新建一个测试Ex…

怎么在excel表格中筛选数据在excel

怎么在excel表格中筛选数据在excel

筛选,数据,步骤,方法,表格,  办公软件大家都会经常用到,常用的表格处理软件就是excel表格,相信大家对填写表格都驾轻熟路但是如何利用软件的内置功能来辅助我们的日常工作呢?下面小编教你怎么在excel表格中筛选数据。excel表格中筛选数据的…

判断滚动条滑到底部触发事件 | 实

判断滚动条滑到底部触发事件 | 实

事件,滚动条,滑到,实例,电脑软件,实例如下所示:$(document).on("scroll", function () { //真实内容的高度 var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight); //视窗的高度 var viewportHeight = win…

Word中进行设置文本框格式的操作方

Word中进行设置文本框格式的操作方

设置,文本框,操作方法,格式,操作步骤,  如何在Word设置文本框格式的操作使用,具体是怎么去进行操作的呢?今天,小编就教大家在Word中进行设置文本框格式的操作方法。Word中进行设置文本框格式的操作步骤选中要设置的文本框,如图所示。点击菜…

Excel数据条功能怎么实现正负数据

Excel数据条功能怎么实现正负数据

数据,正负,功能,电脑软件,Excel,  在Excel 2010中改进了条件格式中的&ldquo;数据条&rdquo;功能,利用它,不仅可以通过带有颜色的数据条标识数据大小,并且还可自动区别正、负数据,从而使差异数据更易理解。以下是小编为您带来的关于Excel数据条…