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);
}
其他连接
javascript操作referer的更多相关文章
- 第三章 JavaScript操作BOM对象
第三章 JavaScript操作BOM对象 一.window对象 浏览器对象模型(BOM)是javascript的组成之一,它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HT ...
- JavaScript操作XML
JavaScript操作XML (一) JavaScript操作XML是通过XML DOM来完成的.那么什么是XML DOM呢?XML DOM 是: 用于 XML 的标准对象模型 用于 XML 的标准 ...
- 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...
- 在Javascript操作JSON对象,增加 删除 修改
在Javascript操作JSON对象,增加删除修改全有的,详情见代码 <script type="text/javascript"> var jsonObj2 = { ...
- javascript 操作复选框无效
<script type="text/javascript"> // 操作checkbox复选框按钮 var inputs = $('#article_list').f ...
- 用javascript操作xml
用javascript操作xml 可以使用标准DOM操作. IE创建XML MSXML2.0DOMDocument function createXMLDOM(){ var version = [ ' ...
- Cookie介绍及JavaScript操作Cookie方法详解
本文主要为大家简单介绍了以下Cookie的用途.运行机制,以及JavaScript操作Cookie的各种方法,总结的比较全面,希望能给大家带来帮助. 什么是 Cookie “cookie 是存储于访问 ...
- JavaScript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
随机推荐
- Cookie无法读取
问题描述:用谷歌调试可以看到,但是用js去读取的时候,一直提示undefined
- AngularJS笔记--自定义指令
在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义. 下面定 ...
- JS入门学习,写一个简单的图片库
<!-- 新手刚开始学JS,每天坚持写点东西 坚持下去,希望能有所进步 . 加油~~ --> <!DOCTYPE html> ...
- NOIP2012国王游戏
题目描述 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右 手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排 成一排,国王站在 ...
- java操作Redis
需要使用如下jar包 <!-- https://mvnrepository.com/artifact/redis.clients/jedis --> <dependency> ...
- oracle基本操作符/运算符/操作语言
racle中的操作符算术操作符: 无论是在sqlserver,或者是java中,每种语言它都有算术操作符,大同小异.Oracle中算术操作符(+)(-)(*)(/) 值得注意的是:/ 在oracle中 ...
- .gitignore详解
今天讲讲Git中非常重要的一个文件――.gitignore. https://git-scm.com/docs/gitignore 首先要强调一点,这个文件的完整文件名就是“.gitignore”,注 ...
- windows下的NodeJS安装
1.登录官网 http://nodejs.org ,install 下载安装包.. 2.安装过程基本直接“NEXT”就可以了. 3.安装完成后可以使用cmd(win+r然后输入cmd进入)测试下是否安 ...
- JS组件系列——Bootstrap 树控件使用经验分享
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...
- LCS问题
最长公共子序列问题 1.这里pre数组表示回溯的方式,状态转移方程!!! #include <iostream> #include <algorithm> #include & ...