页面跳转javascript操作referer

页面跳转javascript操作refererReferrer 的重要性 HTTP 请求中有一个 referer 的报文头 用来指明当前流量的来源参考页 例如在 www sina com cn sports 上点击一个链接到达 cctv com 首页 那么就 referrer 就是 www sina com cn sports 了 在 Javascript 中 我们可以通过 document referrer 来获取同样的信息 通过这个信息 我们就可以知道访客是从什么

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域名,其他部分不变:

1

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

但是,通过修改Location进行页面导航的方法,会导致在IE下丢失Referrer。

IE5.5+ 下返回空字符串

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

window.open方式打开新窗口

示例:

1

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

点击此链接会在新窗口打开Google网站,我们在地址栏中输入以下js代码就可以看到发送的referrer了。

1

javascript:alert(document.referrer)

测试结果:

IE5.5+ 下返回空字符串

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

如果是同个域名下通过此方式跳转的,那么我们可以通过访问windoww.opener对象去获取丢失的referrer信息。代码如下:

    var referrer = document.referrer;

    if (!referrer) {

        try {

            if (window.opener) {

                // IE下如果跨域则抛出权限异常

                // Safari和Chrome下window.opener.location没有任何属性

                referrer = window.opener.location.href;

            }

        }

        catch (e) {}

    }

跨域的话则没辙了~

鼠标拖拽打开新窗口

鼠标拖拽是现在非常流行的用户习惯,很多浏览器都内置或者可以通过插件的方式来支持鼠标拖拽式浏览。但是通过这种方式打开的页面,基本全都丢失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);

}

原文:Ruby’s Louvre 的 javascript操作referer 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/227205.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月16日 下午9:42
下一篇 2026年3月16日 下午9:42


相关推荐

  • 台式硬盘接口详解_台式机主板硬盘接口

    台式硬盘接口详解_台式机主板硬盘接口2016-12-1612:16:44扩展分区类似于一个完整的硬盘,必须进一步分区才能使用。但每个扩展分区中只能存在一个其他分区。此分区在DOS/Windows环境中即为逻辑盘。因此每一个扩展分区的分区表(同样存储在扩…2016-12-2413:34:30你好这个简单方法如下:1、把SATA数据线的一头,插在主板的SATA接口上。如果有多块硬盘,要把启动盘接在第一个口上。如果硬盘是sat…

    2025年6月14日
    5
  • 谈谈几个 Spring Cloud 常见面试题及答案

    来自:Wbw Belief 链接:blog.csdn.net/qq_41497111/article/details/92067565 全文目录 什么是微服务? 微服务之间如何独立…

    2021年6月23日
    117
  • vue双向数据绑定原理面试_vue双向绑定原理

    vue双向数据绑定原理面试_vue双向绑定原理vue.js则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。vue实现双向数据绑定的原理就是利用了Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set…

    2022年10月18日
    8
  • Go http2 和 h2c

    Go http2 和 h2c1 http 1 1 的服务器我们经常会在代码中启动一个 http 服务器 最简单的 http 1 1 服务器如下所示 1http Handle foo fooHandler 2http HandleFunc bar func whttp ResponseWrit r http Request 3fmt Fpr

    2026年3月19日
    2
  • 高级I/O函数之sendfile函数[通俗易懂]

    高级I/O函数之sendfile函数[通俗易懂]sendfile函数在两个文件描述符之间传递数据(完全在内核中操作),从而避免了内核缓冲区和用户缓冲区之间的数据拷贝,效率很高,被称为零拷贝。函数定义为:#include<sys/sendfile.h>ssize_tsenfile(intout_fd,intin_fd,off_t*offset,size_tcount);in_fd参数是待读出内容的文件描述符,out…

    2022年5月10日
    39
  • ssl通关的概念(一个)

    ssl通关的概念(一个)

    2022年1月6日
    48

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号