JavaScript中document.referrer用法的详细说明

序

在JavaScript中，文档对象有很多属性，其中有三个与网页请求相关的属性，分别是URL、域和引用者。

URL属性包含页面的完整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标记表示return button元素就可以了：

a id=' back ' href=' JavaScript : history . back()；'Rel='外部nofollow' /a嗯？尽管如此，document.referrer有什么用！别急，前面只是铺路，那就言归正传吧~ ~ ~

虽然我感觉返回上一页的功能已经基本这样实现了，但是还有一种情况没有考虑到(我们程序员应该更严谨一点)，那就是页面被别人分享而不是通过其他页面进入怎么办？然后点击这个按钮不会有任何反应，因为此时history对象中没有历史，这意味着这是浏览器窗口打开时你浏览的第一页。

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

假设这里选择了第一个选项，我们可以这样编写JS:

if(document . referer){ back . style . display=' block '；//默认隐藏，referrer属性不为空时显示。}结论

实际上，当前页面是否是用户在开始时打开的页面，不仅可以通过判断referrer属性来判断，还可以通过判断history.length是否为零来判断。

好了，这就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。