javascript操做referer

Referrer的重要性

HTTP请求中有一个referer的报文头，用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个连接到达cctv.com首页，那么就referrer就是www.sina.com.cn/sports/了。在Javascript中，咱们能够经过document.referrer来获取一样的信息。经过这个信息，咱们就能够知道访客是从什么渠道来到当前页面的。这对于Web Analytics来讲，是很是重要的，这能够告诉咱们不一样渠道带来的流量的分布状况，还有用户搜索的关键词等，都是经过分析这个referrer信息来获取的。

可是，出于各类各样的缘由，有时候Javascript中读到的referrer倒是空字符串。下面总结一下哪些状况下会丢失referrer。

修改Location对象进行页面导航

Location对象是一个用于页面导航的很是实用的对象。由于他容许你只变动Url的其中一部分。例如从cn域名切换到com域名，其余部分不变：

window.location.hostname = "example.com";

可是，经过修改Location进行页面导航的方法，会致使在IE下丢失Referrer。

IE5.5+ 下返回空字符串

Chrome3.0+，Firefox3.5，Opera9.6，Safari3.2.2均正常返回来源网页

window.open方式打开新窗口

示例：

<a href="#" onclick="window.open('http://www.google.com')">访问Google</a>

点击此连接会在新窗口打开Google网站，咱们在地址栏中输入如下js代码就能够看到发送的referrer了。

javascript:alert(document.referrer)

测试结果：

IE5.5+ 下返回空字符串

Chrome3.0+，Firefox3.5，Opera9.6，Safari3.2.2均正常返回来源网页

若是是同个域名下经过此方式跳转的，那么咱们能够经过访问windoww.opener对象去获取丢失的referrer信息。代码以下：

<script type="text/javascript">
    var referrer = document.referrer;
    if (!referrer) {
        try {
            if (window.opener) {
                // IE下若是跨域则抛出权限异常
                // Safari和Chrome下window.opener.location没有任何属性
                referrer = window.opener.location.href;
            }
        } 
        catch (e) {}
    }
</script>

跨域的话则没辙了~

鼠标拖拽打开新窗口

鼠标拖拽是如今很是流行的用户习惯，不少浏览器都内置或者能够经过插件的方式来支持鼠标拖拽式浏览。可是经过这种方式打开的页面，基本全都丢失referrer。而且，这种状况下，也没法使用window.opener的方式去获取丢失的referrer了。

已测试：

Maxthon2.5.2，Firefox的FireGesture插件，Chrome3.0+，Opera9.6，Safari3.2。

点击Flash内部连接

点击Flash上到达另一个网站的时候，Referrer的状况就比较杂乱了。

IE下，经过客户端Javascript的document.referrer读取到的值是空的，可是若是你使用流量监控软件看一下的话，你会发现，实际上HTTP请求中的Referer报文头倒是有值的，这多是IE实现的Bug。同时，这个值指向的是Flash文件的地址，而不是来源网页的地址。

Chrome4.0下点击Flash到达新窗口以后，Referrer也是指向的Flash文件的地址，而不是源网页的地址。

Chrome3.0和Safari3.2是同样的，都是会丢失Referrer信息。

Opera则和Firefox同样，Referrer的值都是来源网页的地址。

HTTPS跳转到HTTP

从HTTPS的网站跳转到HTTP的网站时，浏览器是不会发送referrer的。这个各大浏览器的行为是同样的。

例如，咱们在HTTPS下使用Google Reader或是Gmail的时候，点击某个连接去到另一个网站，那么从技术上来讲，这样的访问和用户直接键入网址访问是没有什么分别的。

Referrer丢失对于广告流量监控的影响

Referrer若是丢失，Web Analytics就会丢掉很重要的一部分信息了，特别对于广告流量来讲，就没法知道实际来源了。目前国内好多用了Google Adsense广告的网站，都使用了window.open的方式来打开广告连接，所以IE下会丢失Referrer，而咱们知道，IE是目前市场份额最大的浏览器，所以其影响是很大的。不少流量统计工具会所以将这部分流量纳入“直接流量”，和用户直接键入网址等价了。

对于这样的状况，须要让广告投放者在投放广告的时候，给着陆页面的Url加上特定的跟踪参数。

例如，某个Flash广告，点击以后到达的网址是http://www.example.com/，为了监控此流量是从哪一个渠道过来的，咱们能够修改此投放的着陆Url，改为http://www.example.com/?src=sina，相似这种方式，而后在着陆页面中使用Javascript代码提取此src参数，这样就能够获得广告来源信息。

在投放Google Adwords的时候，后台系统有一个“自动标记”的选项，当启用此选项的时候，Google在生成全部广告的着陆页面Url的时候，就会自动加上一个gclid的参数，这个参数可以将Google Analytics后台和Adwords广告后台的数据进行整合。这样就能够知道广告流量对应于哪一个广告系列，哪一个广告来源和广告关键词等信息了。和上面提到的思路实际上是相似的。只不过Google自动帮你作了Url的修改了而已。

IE下referer为空的解决办法

在IE下采用 window.location.href方式跳转的话，referer值为空。而在标签里面的跳转的话 referer就不会空。因此，经过如下代码就能够解决这个IE问题

function gotoUrl(url){
     if(window.VBArray){
         var gotoLink = document.createElement('a');
         gotoLink .href = url;
         document.body.appendChild(gotoLink);
         gotoLink .click();
     }else{
       window.location.href = url;
     }
 }

禁止浏览器在访问连接时不要带上referer

咱们在从一个网站点击连接进入另外一个页面时，浏览器会在header里加上Referer值，来标识此次访问的来源页面。可是这种标识有可能会泄漏用户的隐私，有时候我不想让其余人知道我是从哪里点击进来的，可否有手段可让浏览器不要发送Referer呢？

• 使用新增的html5的解决方案,使用rel="noreferrer",声明链接的属性为noreferrer,目前只有chrome4+支持.
• 使用中间页面,但实际上仍是发送referrer的,好比使用Google的链接转向,noreferrer.js.
• 使用javascript协议连接中转,参见下面的说明.

新开一个窗口,至关于target="_blank":

function open_window(link){ 
    var arg = '\u003cscript\u003elocation.replace("'+link+'")\u003c/script\u003e';
    window.open('javascript:window.name;', arg);
}

转向到一个链接,至关于target="_self":

function redirect(link){ 
    var arg ='\u003cscript\u003etop.location.replace("'+link+'")\u003c/script\u003e';
    var iframe = document.createElement('iframe');
    iframe.src='javascript:window.name;';
    iframe.name=arg;
    document.body.appendChild(iframe);
}

其余链接