JavaScript中document.referrer的用法详解

document.referrer属性简介

前言

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

其中，URL属性存储页面的完整地址，domain属性仅包含域名部分，而referrer属性则记录了链接到当前页面的上一个页面的URL。

前两个属性较为直观，referrer属性即指代上一页的URL地址。该属性在实际开发中有哪些具体应用场景呢？

返回按钮的常见实现方式

在H5移动端页面开发中，通常需要在页面头部添加一个返回上一页的按钮，效果如下所示：

页面头部

点击左侧的返回元素，可以通过编写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的具体作用。接下来将进入核心主题。

基于referrer的首屏返回逻辑处理

虽然上述方法基本实现了返回上一页的功能，但存在一种未考虑的情况（需保持严谨）：如果该页面是通过他人分享链接直接打开，而非从其他页面跳转进入，此时点击按钮将无反应，因为浏览器历史记录中不存在前序页面，即这是用户打开浏览器的第一个页面。

为优化用户体验，通常有两种解决方案：一是在打开首个页面时隐藏返回按钮；二是点击按钮直接跳转至网站首页。具体方案可根据产品需求选择。

假设选择第一种方案（隐藏按钮），可通过以下JS代码实现：

if(document.referrer){
 back.style.display = 'block'; //默认让其隐藏，当referrer属性不为空时让其显示
}

其他判断首屏页面的方法

结束语

判断当前页面是否为用户首次打开的页面，除检测referrer属性外，还可通过判断history.length是否为零来实现。

以上为本文全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对本站的支持。