详谈javascript中document.referrer的兼容性

遇见了，却来不及相识；相识了，却来不及熟悉；熟悉了，却还是要说再见。既然每天都见面，为何不提前熟悉一下呢？

读书是为了明理，我们还是带着问题来了解referrer的重要性和用途吧！

一：什么是referrer？

1. referrer中文意思是：来源，推荐人。网络意义是指网站的来路，又称“来源”，HTTPReferrer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上referrer，告诉服务器用户从哪个页面链接过来的，服务器可以获得referrer的信息用于加工处理。比如：我从我的页面连接到朋友的页面，我朋友的服务器就能够从 HTTP Referer中统计出每天有多少个用户点击我主页上的链接访问他的网站。(注意：Referer其实应该是英文单词Referrer，编写http标准的人也就将错就错了。所以嘛，要敢于向权威质疑)。
2. 因为referrer可能是私有的信息，或者可能泄露其他私有的信息来源，所以，建议用户选择是否发送reffer域。例如：浏览器客户端可能有切换选项来公开、匿名浏览，发送refererfrom信息。如果通过安全协议传输，客户端不应该在http请求中包括referer域。
3. referrer有时候也被用作防盗链（即下载网页资源的时候判断源地址是不是在网站域名之内，否则就不能下载或者显示），比如CSDN都是通过Referer页面来判断用户是否能够下载代码或者资源。
4. 当然，对于某些黑客可能伪造Referer来获得某些权限,在设计网站时一定需要考虑到这个问题。但是对于浏览器来说，以下情况是不会发送Referer，因为可能有潜在的安全问题：
* 用户手动输入网址或是从收藏夹中访问
* 对https等加密协议是不带Referrer的。
5. 处于以上等各种原因，有时候我们通过javascript中document.referrer获取不到来源，下面总结一下我们开发过程中碰到的丢失Referrer的情况。

二：模拟丢失Referrer的现象？

首先我们写个公用的test代码，test.html页面的代码是：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title> </head><body>欢迎来到test页面</body><script>alert('来源是：'+ document.referrer);</script>
</html>

1. window.open方式打开新窗口

//方法一：直接用window.open()跳转在ie6,7,8 11丢失Referrer ,在edge，opera、chrome、Firefox都能拿到Referrer，看来用window.open()直接，去来源对于新一代浏览器都不适用。window.open('test.html');//

下面是用windows.open()里面的内容进行间接跳转，都是精心测试的结果：

        var url = 'http://localhost/04interesting/11js/05js-Internet/01referer/all/test.html';//方法二：window.location.href在每个浏览器都可以获取referrerwindow.location.href = 'test.html';//方法三：opera，chrome，edge，ie11，qq，uc，丢失referrer，但是Firefox不丢失，ie6无法跳转window.open('javascript:window.name;','<script>location.replace("'+url+'")<\/script>');// 方法四：opera，chrome,qq,uc丢失referrer，但是Firefox不丢失，  ie6，ie11，edge无法跳转window.open('data:text/html,<html><body><script>location.replace("'+url+'")<\/script></body></html>');// 方法五：opera,chrome,ie6,ie11,edge,qq,uc丢失referrer ,但是Firefox不丢失，window.open('javascript:location.replace("' + url + '")');//方法六：opera,chrome Firefox,uc,qq丢失来源 ,      ie6，ie11，ie9,edge不跳转window.open('data:text/html,<html><head><meta http-equiv="Refresh" content="0;' + url + '"/></head><body></body></html>');

2. 用refresh方法刷新跳转到新窗口

<!--<!DOCTYPE html>-->
<html><head><meta charset="UTF-8"><meta http-equiv="Refresh" content="0;URL=test.html"><title></title></head>  <body>                             <a href="test.html">点我到test.html</a>    </body>
</html>

对<meta http-equiv="Refresh" content="0;URL=test.html">：总结ie6,ie11,edge,火狐不能，google,opera上可以获取到Referrer,另外在qq，360和uc浏览器上都可以获取来源
3. 创建iframe的方法

        var ifm = document.createElement('iframe');ifm.src ='test.html'; 'javascript:"<script>top.location.replace(\'./test.html\')<\/script>"';document.body.appendChild(ifm);

用iframe在opera，chrome,uc,360,上获取不到Referrer，在ie6,ie11,edge,firefox上能获取到。
4.location.search.replace(‘?url=’,”),即：跳转代理页面的方法
我们先创建一个代理页面 middle.html

        var url = location.search.replace('?url=','');// location.replace(decodeURL(url));alert(location);location.replace(decodeURI(url));

然后我们通过另一个页面来跳转到middle.html页面上：

    //此方法在ie6中不能跳转var url = 'test.html';window.open('bridge.html?url='+ encodeURI(url));

*5.用封装好的跳转js代码，通过a标签直接跳转

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../../../../../lib/jq1.8.3.jquery.mini.js" charset="utf-8"></script><script src="./noreferrer.js"></script></head><body><a href="./test.html" rel="noreferrer">点击我到test.html,而且不带来源</a></body>
</html>

6，用h5的方法大部分浏览器都获取不到来源，代码如下：
方法一：<meta name="referrer" content="never"> 和widnow.open();

<!--<!DOCTYPE html>-->
<html>
<head><meta charset="UTF-8"><meta name="referrer" content="never"><title></title>
</head>
<body><a href="test.html">点我到test.html</a>
</body>
<script>//在ie6,ie11,360,uc,chrome,opera都不能拿到Referrerwindow.open('test.html');</script>
</html>

方法二：a标签中的rel=”noreferrer”

<a href="test.html" target="_blank" rel="noreferrer">点我到test.html</a>

5.鼠标拖拽文档打开窗口
全部都丢失referrer;
6.从https地网站跳转到http的网站
浏览器是不会发送referrer地.这个各大浏览器地行为是一样地.
例如，我们在https下使用google reader或是gmail地时候，点击某个链接去到另外一个网站，那么从技术上来说，这样地访问和用户直接键入网址访问是没有什么分别地.

三：referrer对于广告流量监控地影响？
对于广告监控流量来说，referrer非常重要，目前国内好多用了google adsense广告的网站，都使用了window.open的方式来打开广告链接，因此，ie下会丢失referrer，由于ie在市场占得比重很大，很多流量统计工具会因此把这一部分流浪归入“直接流量”，和用户直接键入网址等价了。因此我们必须深入了解referrer在每个浏览器的落脚点。
以上均为原创，当然也有参考部分，以下是参考汇总的网址，我希望把东西分享开，如有错误请大家及时反馈，愿意分享才能让世界更美好！
http://www.cnblogs.com/zhangzt/archive/2009/12/24/1631253.html
http://www.tuicool.com/articles/YJjeq2U
http://jishu.admin5.com/biancheng/140311/840.html
http://www.gbtags.com/gb/share/4907.htm

详谈javascript中document.referrer的兼容性相关推荐

java referrer_JavaScript中document.referrer的用法详解
前言在JavaScript中,document对象有很多属性,其中有3个与对网页的请求有关的属性,它们分别是URL.domain和referrer. URL属性包含页面完整的URL,domain属性 ...
js中document.referrer认识
document.referrer:用来得到上一页的url地址 ,格式必需是(超级链接)(http:\\...)(格式错误则失效) 显示上一个网页的url: 1 <script type=&qu ...
javascript中document用法
详细讲解JavaScript脚本语言的 document 对象者:整理对象属性代码 document.title //设置文档标题等价于HTML的<title> ...
JavaScript中document的用法
详细讲解JavaScript脚本语言的 document 对象者:整理对象属性代码 document.title //设置文档标题等价于HTML的<title> ...
详谈Javascript中的深拷贝和浅拷贝
数据复制是我们编程中经常会使用到的技术,对于普通数值数据来说,复制很简单,但是对于复杂类型比如对象的复制,就会有很多需要考虑的东西,比如我们经常说到的深拷贝和浅拷贝. 浅拷贝复制的对象和原始对象属性 ...
javascript中new Date浏览器兼容性处理
看下面的代码 <script type="text/javascript">var dt1 = new Date('2016-3-4 11:06:12');alert( ...
Javascript中document.execCommand()的用法
document.execCommand()方法处理Html数据时常用语法格式如下: document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指 ...
javascript中document.getelementbyid缺少对象的问题原因
下面这段代码浏览器端运行时会报错:缺少对象原因是:在还未加载img对象前就试图通过它的id得到img对象. 从这个错误就可以看出Javascript和html的一些特性. 下面是报错的代码段 < ...
document.referrer和history.go(-1)退回上一页区别
javascript:location=document.referrer;和javascript:history.go(-1);区别: 返回上一页,在PC端我们可以使用:history.go(-1) ...

详谈javascript中document.referrer的兼容性

详谈javascript中document.referrer的兼容性相关推荐

最新文章

热门文章