document.referrer

document.referrer是用来获取跳转链接的来源，正规的解释是:referrer 属性可返回载入当前文档的文档的 URL。

实际中使用在广告相关业务中较多，包括推广等。

举个例子：

比如我们从百度中跳转到w3c，那我们从w3c中可以获取到referrer，这个referrer就是https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=document.referrer&oq=%E6%B8%85%E9%99%A4referrer&rsv_pq=bfd3dd180001b68f&rsv_t=876eCMwvcF%2Flc4tY42Va03DF7M83coNzQeRp4L2xYhUVk840K1J53CNfslM&rqlang=cn&rsv_enter=1&inputT=10344&rsv_sug3=111&rsv_sug1=109&rsv_sug7=000&rsv_n=2&bs=%E6%B8%85%E9%99%A4referrer

从http请求头部我们也可以找到这个referrer

Referer:https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=document.referrer&rsv_pq=ad59c4820001a9ba&rsv_t=d9cb%2Bi5AE7Ns3JHq3qbNca2i5LbazZfjc364gvq%2BclD%2Bs%2Fi44XuGYnb3giY&rqlang=cn&rsv_enter=1&rsv_sug3=12&rsv_sug1=11&rsv_sug7=100&sug=document.referrer&rsv_n=1

同样我们在w3c页面中控制台中也获取到这个referrer。

document.referrer

"https://www.baidu.com/link?url=zLE2dhkSRJRlNuL1zLsfITcCHKA3FsrHk5uED2tu0xy1…dNBzUaqr3MjKzyz-xPewdyNCPKmMvQrq&wd=&eqid=a28369d50001b64700000005586b49c2"

清除来源

最常用的还是使用iframe来隐藏referrer。

下面来看一个例子：

<!DOCTYPE html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>document.referrer</title>

</head>

<body>

    <h1>隐藏referrer</h1> 跳转至百度(有referrer):

    <a target="_blank" href="https://www.baidu.com/">test</a>

    <script type="text/javascript">

    var iframe = document.createElement('iframe'),

        html = '<!doctype html><head><meta charset="utf-8"></head><body>跳转至百度(无referrer):<a target="_blank" href="https://www.baidu.com/">referrer test</a></body>',

        src = 'javascript:document.write(window.frameElement.getAttribute(\'data-src\'))';

    iframe.setAttribute('data-src', html);

    iframe.setAttribute('src', src);

    iframe.width = '500';

    iframe.height = '300';

    document.body.appendChild(iframe);

    </script>

</body>

效果如图：

当我们点击有referrer的a标签的时候，在百度页面我们可以看到referrer。

当我们点击ifame中嵌套的a标签的时候，在百度页面我们可以看到referrer为空字符串。

document.referrer之隐藏来源的更多相关文章

  1. 深入理解document.referrer的用法

    前言 在JavaScript中,document对象有很多属性,其中有3个与对网页的请求有关的属性,它们分别是URL.domain和referrer. URL属性包含页面完整的URL,domain属性 ...

  2. 移动端返回上一页，刚需！document.referrer 详解

    返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问 ...

  3. document.referrer和history.go(-1)退回上一页区别

    javascript:location=document.referrer;和javascript:history.go(-1);区别: 返回上一页,在PC端我们可以使用:history.go(-1) ...

  4. document.referrer的使用和window.opener 跟 window.parent 的区别

    偶尔看到了document.referrer,之前一直有点疑惑与window.opener 和 window.parent之间的区别 首先查了一下w3cSCHOOL, 上面的解释:referrer 属 ...

  5. document.referrer 特性

    最近需要用到document.referrer,但是在测试的时候,总是获取为空,百思不得其解. 于是发动百度,看了大量的文章没有一个说到点子上是为什么,后来偶然看到document.referrer ...

  6. 关于document.referrer的使用需要注意

    项目使用到一个场景,ajax请求返回无权限,跳回登录页面,登录后自动返回之前的浏览页,跳转由前端处理,于是想到document.referrer,但是对可靠性不确定,特意搜索了一下相关资料,大致整理如 ...

  7. ashx+jsonp+document.referrer

    -- 一年前学的JSONP 跨域,一年后的今天相关知识点基本忘光.花了一天时间重新学习,再次感谢各位前辈的帖子,特此记录如下. --html <!DOCTYPE html PUBLIC &quo ...

  8. js获取浏览器上一访问页面URL地址，document.referrer方法

    如题,可用document.referrer方法获取上一页面的url 但是也有不可使用的情况 直接在浏览器地址栏中输入地址: 使用location.reload()刷新(location.href或者 ...

  9. javascript document.referrer 用法

    document对象的referrer属性,返回导航到当前网页的超链接所在网页的URL. 举例: 1. a.html文件内容如下: <a href="b.html">浏 ...

随机推荐

  1. Linux忘记rootpassword

    我们常常会碰到忘记rootpassword的情况,以下是解决之道,  此方法使用绝大多数的Linux发行版:  1. 首先进入grub  2. 在须要编辑的入口处,按下e,在quite后增加     ...

  2. PLSQL导入/导出数据方法

    PLSQL导入/导出数据方法 PLSQL导入/导出数据方法 以前导数据库信息的时候,总是会先开启sql窗口,把自己手写的建表文件复制进去,然后再导入数据信息. 今天突然懒得去找以前的建表文件,而想用S ...

  3. BackgroundWorker组件使用总结

    首先在窗体拖入一个BackgroundWorker组件,根据功能需要设置BackgroundWorker的属性 WorkerSupportsCancellation = true; 允许取消后台正在执 ...

  4. knockout同时绑定多个实体demo

    1.我们会遇到一种情景:一个页面实现复杂的功能时,我们往往会使用部分页(.netmvc中的@renderaction,java中ajax请求jsp页面). 如果子页面也使用knockout绑定数据会不 ...

  5. c#下载文件案例

    public static void HttpDown(string fileName, System.Web.UI.Page p_Page,string floder) { string path ...

  6. 重温HTML的基础

    新年新气象,新的一年要有自己的学习计划与工作计划.希望大家能够共享. 经过一段时间,我想重新复习与学习一下HTML的基础,我呢打算整理一下W3C里面的知识,也许对某些人没有任何作用,但是对我来说这是我 ...

  7. CSLA .NET是一个.NET软件开发框架

    CSLA .NET是一个.NET软件开发框架,帮助开发者“为Windows.Web.面向服务和工作流等应用构建强大和可维护的业务逻辑层”. CSLA是Component-based, Scalable ...

  8. Python远程视频监控

    Python远程视频监控程序   老板由于事务繁忙无法经常亲临教研室,于是让我搞个监控系统,让他在办公室就能看到教研室来了多少人.o(>﹏<)o||| 最初我的想法是直接去网上下个软件,可 ...

  9. web-worker计数器，根据输入时间统计次数

    1.用web-worker实现:另起一个线程,将计数工作运行在后台的JavaScript文件,并返回累加后的结果. 该js文件运行于后台,独立于其他脚本,不会影响页面的性能.html页面可以继续做任何 ...

  10. 不用char*作为hash_map的key

    尽量不用char*作为hash_map的key Posted on 2013-09-09 21:21 Springlie 阅读(83) 评论(0) 编辑 收藏 引子: 同事前几天用hash_map时发 ...