JavaScript中document.referrer的用法详解

前言

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

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标签表示该返回按钮元素：

<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是否为零来判断。

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

赞 (0)

相关推荐

  • JavaScript中的document.referrer在各种浏览器测试结果

    前段时间需要通过 JavaScript 获取页面的来源,这个操作很简单,使用 document.referrer 就可以获取到了.不过,实际应用中还是有很多意外情况,这儿简单整理一下. 首先遇到的问题,是从 HTTPS 页面转到 HTTP 页面后,document.referrer 的值为空.出于安全性考虑,很多网站的一些重要页面(比如淘宝的登录页面)都会使用 HTTPS 协议.如果某个未登录用户在页面 A(HTTP 页面)点击了页面 B(HTTP 页面)的链接,但页面 B 需要用户登录,于是先

  • Javascript中document.referrer隐藏来源的方法

    Javascript中document.referrer隐藏来源的方法

    前言 本文为大家讲解的是关于Javascript中document.referrer隐藏来源的方法探讨,感兴趣的同学参考下. 关于隐藏来路 Referrer 在某些情况下很有用,国外网赚界使用的非常广泛.比如流量提供方由于不想让联盟知道自己的流量来源,就需要隐藏自己来源网站的 referer. document.referrer document.referrer是用来获取跳转链接的来源,正规的解释是:referrer 属性可返回载入当前文档的文档的 URL. 实际中使用在广告相关业务中较多,包

  • js中document.referrer实现移动端返回上一页

    返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问题. 但是在移动端,如果想要返回上一页.比如从A页面跳到B页面,如果B页面想返回A页面,为了防止不会跳错,必须要有一个 <  按钮,给它加 history.go(-1) ,返回上一层. <a href="javascript:history.go(-1)" rel="

  • Javascript document.referrer判断访客来源网址

    Javascript document.referrer判断访客来源网址

    今天遇到一个蛮有趣的问题,由于公司与一些厂商有合作关係,因此双方的网站中也都会交换连结,当今天合约也终止后,但对方始终一直没把连结的部分下掉时,这有时会产生一些不必要的误会,让一般的使用者认为双方还有合作关係,固然说这样子可赚到一些流量,但相对的也造成了一些误解,因此上头则希望能否去判断使用从它站连来时,就把它拒绝在门外,这让梅干退了三步,原本以为要从主机来作设定,上网找了一些文件后,才发现只要用简单几行的javascript,就可抓到使用的来源,以及作出一些防范的措施.效果图: 复制代码 代码

  • IE下document.referrer 拒绝访问的解决方法

    用document.referrer回到来源页(也可以称作上一页)时非常方面,我们不用知道来源页复杂的url,而且document.referrer回到来源页时会重新加载,而不是上一次的状态,所以说非常的方便. 但是在IE中用javascript做跳转,比如用window.location.href=""; 跳转到的页面无法取到浏览器请求的HTTP referrer,IE浏览器会报脚本错误"拒绝访问",因为IE清空了document.referrer. 而其他主流浏

  • javascript的document.referrer浏览器支持、失效情况总结

    javascript的document.referrer浏览器支持、失效情况总结

    在流量统计服务中都有Traffic source这个功能.Traffic source是针对访次级别的概念,换句话说,当访次建立的时候,landing page的流量来源即是该访次的Traffic source.虽然Traffic source有很多种,不过不幸的是依据现在JS,获得Traffic source的途径只有两种--document.referrer.window.opener.更不幸的是,window.opener适用的场景不多,而document.referrer非常的弱,以至于

  • javascript document.referrer 用法

    举例: 1. a.html文件内容如下: <a href="b.html">浏览b.html </a> 2. b.html文件中的内容如下: <body> <script type="text/javascript"> document.write(document.referrer); </script> </body> 3. 则在通过a.html中的超链接访问b.html的时候,显示的结果是

  • JavaScript中document.referrer的用法详解

    JavaScript中document.referrer的用法详解

    前言 在JavaScript中,document对象有很多属性,其中有3个与对网页的请求有关的属性,它们分别是URL.domain和referrer. URL属性包含页面完整的URL,domain属性中只包含页面的域名,而referrer属性中则保存着链接到当前页面的那个页面的URL. 前面两个很好理解,而referrer属性简单来说就是上一个页面的URL.那么这个属性具体有什么用处呢? 在H5页面中,我们经常要在头部加个返回上一个页面按钮,就像下面这样的: 页面头部 点击左侧的元素可以返回到上

  • JavaScript中的splice方法用法详解

    JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等. 注意:这种方法会改变原始数组!. 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例:

  • javascript中instanceof运算符的用法详解

    概述 instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上 语法 obj instanceof Object;//true 实例obj在不在Object构造函数中 描述 instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上. 实例 1.instanceof的普通的用法,obj instanceof Object 检测Object.prototype是否存在于参数

  • javascript中window.event事件用法详解

    前两天写程序时因为要用到javascript中的window.event事件,于是就在网上搜了一下,终于找到一篇不错的文章,来与大家分享下: 描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子下面的例子检查鼠标是否在链接上单击,并且,如

  • JavaScript中switch语句的用法详解

    可以使用多个if... else if语句,如前面的章节,执行多路分支.然而,这并不总是最佳的解决方案,尤其是当所有分支的依赖单一的变量的值. 使用JavaScript1.2开始,你可以用它处理的正是这种情况,使用一个switch语句,它这样做更有效,如果不是反复地使用if... else if语句. 语法 switch语句的基本语法给出一个expression ,以评估计算几种不同的语句基于该表达式的值来执行.解释器检查对表达式的值的每一种情况,直到找到一个匹配.如果没有匹配,则缺省(defa

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

  • JavaScript中浅讲ajax图文详解

    JavaScript中浅讲ajax图文详解

    1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

  • vue框架中props的typescript用法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 在vue中使用typescript时,需要引入vue-pro

  • ASP.NET Core中Cookie验证身份用法详解

    目录 添加配置 ASP.NETCore1.x ASP.NETCore2.x 创建身份认证Cookie ASP.NETCore1.x ASP.NETCore2.x Signingout(登出) ASP.NETCore1.x ASP.NETCore2.x 服务端变化反馈 ASP.NETCore1.x ASP.NETCore2.x Cookie设置选项 ASP.NETCore1.x ASP.NETCore2.x 持久Cookie ASP.NETCore1.x ASP.NETCore2.x 绝对到期时间

  • JavaScript中事件委托的示例详解

    JavaScript中事件委托的示例详解

    目录 事件流 事件委托 结尾 大家好,我是前端西瓜哥.今天我们来认识一下事件委托. 所谓事件委托,就是将原本应该在当前元素绑定的事件,放到它的祖先元素上,让祖先元素来委托处理. 事件流 事件流指从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. 事件流由两阶段组成: 捕获事件 冒泡事件 我们通常用 addEventListener 给元素添加事件: document.querySelector('#card')addEventListener( 'click', function (ev

随机推荐