JavaScript中的document.referrer在各种浏览器测试结果

前段时间需要通过 JavaScript 获取页面的来源，这个操作很简单，使用 document.referrer 就可以获取到了。不过，实际应用中还是有很多意外情况，这儿简单整理一下。

首先遇到的问题，是从 HTTPS 页面转到 HTTP 页面后，document.referrer 的值为空。出于安全性考虑，很多网站的一些重要页面（比如淘宝的登录页面）都会使用 HTTPS 协议。如果某个未登录用户在页面 A（HTTP 页面）点击了页面 B（HTTP 页面）的链接，但页面 B 需要用户登录，于是先跳到登录页面 （HTTPS 页面），登录完成之后再跳回 B（HTTP 页面），这时你会发现 B 页面上取不到 document.referrer 了。也就是说，如果想根据 referrer 来还原用户访问路径的话，如果路径中有 HTTP 页面也有 HTTPS 页面，那么这个路径就会在从 HTTPS 到 HTTP 的地方断掉。

这个问题的根源是浏览器的安全策略，只靠 JavaScript 似乎没有特别好的解决办法。一个迂回的思路是使用 window.name，在 HTTPS 页面将当前页面的 url 写到 window.name 中，再在下一个页面（HTTP 页面）读取。

除了这种情况，其它页面跳转是否都能正常取到 document.referrer 呢？我搜索了一番，发现 这儿 有人整理了一个列表，不过不是很全，例如没有包括垂而不死的 IE6 的情况。于是便自己动手，在虚拟机里装了 N 个浏览器，把各种情况都测试了一下（这真是一个体力活），结果见下表：

操作 IE6 IE7 IE8 IE9 Firefox Chrome Opera Safari
直接在地址栏输入URL “” “” “” “” “” “” “” “”
从书签访问URL “” “” “” “” “” “” “” “”
从页面A点击超链接，跳转到页面B（target=”_self”） √ √ √ √ √ √ √ √
从页面A点击超链接，跳转到页面B（target=”_blank”） √ √ √ √ √ √ √ √
从页面A右键单击超链接，在新标签页中打开页面B - √ √ √ √ √ √ “”
从页面A右键单击超链接，在新窗口中打开页面B √ √ √ √ √ √ √ “”
拖动链接到地址栏 “” 无法拖动 无法拖动 “” “” “” “” “”
拖动链接到标签栏 - “” “” “” “” “” “” “”
使用浏览器的前进、后退按钮 √ √ √ √ √ √ √ √
JS 修改 location.href “” “” “” √ √ √ √ √
JS 使用 window.open “” “” “” “” √ √ √ √
服务器重定向（302跳转） 定向之前的页面 定向之前的页面 定向之前的页面 定向之前的页面 定向之前的页面 定向之前的页面 定向之前的页面 定向之前的页面
页面 Meta Refresh “” “” “” “” “” 转向页 转向页 转向页

上表中的“√”表示能正常取到 referrer，”” 表示 referrer 为空。

除了 IE 外，其它浏览器都是目前官网上能下载到的最新版本，其中 Safari 同时测试了 Windows 版和 Mac 版，结论一样。

另外还有一些情况未做测试，例如点击 Flash 跳转时各浏览器下能否保持 referrer 等。

上表中大部分情况是符合预期的，不过似乎也有几处需要注意的：

1、在 Safari 中，右键打开链接会丢失 referrer；
2、在 IE 中，修改 location.href 或使用 window.open 打开页面会丢失 referrer（IE 9 有一点例外，使用 location.href 跳转不会丢失 referrer）；
3、使用 meta 跳转时，IE / Firefox 下会丢失 referrer。

最后，一个简单的结论是：如果你需要通过 document.referrer 采集页面访问来源，最好不要使用 JS 跳转或打开新窗口，也不要使用 meta 跳转。

赞 (0)

相关推荐

  • JavaScript中document.referrer的用法详解

    JavaScript中document.referrer的用法详解

    前言 在JavaScript中,document对象有很多属性,其中有3个与对网页的请求有关的属性,它们分别是URL.domain和referrer. URL属性包含页面完整的URL,domain属性中只包含页面的域名,而referrer属性中则保存着链接到当前页面的那个页面的URL. 前面两个很好理解,而referrer属性简单来说就是上一个页面的URL.那么这个属性具体有什么用处呢? 在H5页面中,我们经常要在头部加个返回上一个页面按钮,就像下面这样的: 页面头部 点击左侧的元素可以返回到上

  • javascript document.referrer 用法

    举例: 1. a.html文件内容如下: <a href="b.html">浏览b.html </a> 2. b.html文件中的内容如下: <body> <script type="text/javascript"> document.write(document.referrer); </script> </body> 3. 则在通过a.html中的超链接访问b.html的时候,显示的结果是

  • javascript的document.referrer浏览器支持、失效情况总结

    javascript的document.referrer浏览器支持、失效情况总结

    在流量统计服务中都有Traffic source这个功能.Traffic source是针对访次级别的概念,换句话说,当访次建立的时候,landing page的流量来源即是该访次的Traffic source.虽然Traffic source有很多种,不过不幸的是依据现在JS,获得Traffic source的途径只有两种--document.referrer.window.opener.更不幸的是,window.opener适用的场景不多,而document.referrer非常的弱,以至于

  • Javascript document.referrer判断访客来源网址

    Javascript document.referrer判断访客来源网址

    今天遇到一个蛮有趣的问题,由于公司与一些厂商有合作关係,因此双方的网站中也都会交换连结,当今天合约也终止后,但对方始终一直没把连结的部分下掉时,这有时会产生一些不必要的误会,让一般的使用者认为双方还有合作关係,固然说这样子可赚到一些流量,但相对的也造成了一些误解,因此上头则希望能否去判断使用从它站连来时,就把它拒绝在门外,这让梅干退了三步,原本以为要从主机来作设定,上网找了一些文件后,才发现只要用简单几行的javascript,就可抓到使用的来源,以及作出一些防范的措施.效果图: 复制代码 代码

  • Javascript中document.referrer隐藏来源的方法

    Javascript中document.referrer隐藏来源的方法

    前言 本文为大家讲解的是关于Javascript中document.referrer隐藏来源的方法探讨,感兴趣的同学参考下. 关于隐藏来路 Referrer 在某些情况下很有用,国外网赚界使用的非常广泛.比如流量提供方由于不想让联盟知道自己的流量来源,就需要隐藏自己来源网站的 referer. document.referrer document.referrer是用来获取跳转链接的来源,正规的解释是:referrer 属性可返回载入当前文档的文档的 URL. 实际中使用在广告相关业务中较多,包

  • IE下document.referrer 拒绝访问的解决方法

    用document.referrer回到来源页(也可以称作上一页)时非常方面,我们不用知道来源页复杂的url,而且document.referrer回到来源页时会重新加载,而不是上一次的状态,所以说非常的方便. 但是在IE中用javascript做跳转,比如用window.location.href=""; 跳转到的页面无法取到浏览器请求的HTTP referrer,IE浏览器会报脚本错误"拒绝访问",因为IE清空了document.referrer. 而其他主流浏

  • js中document.referrer实现移动端返回上一页

    返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问题. 但是在移动端,如果想要返回上一页.比如从A页面跳到B页面,如果B页面想返回A页面,为了防止不会跳错,必须要有一个 <  按钮,给它加 history.go(-1) ,返回上一层. <a href="javascript:history.go(-1)" rel="

  • JavaScript中的document.referrer在各种浏览器测试结果

    前段时间需要通过 JavaScript 获取页面的来源,这个操作很简单,使用 document.referrer 就可以获取到了.不过,实际应用中还是有很多意外情况,这儿简单整理一下. 首先遇到的问题,是从 HTTPS 页面转到 HTTP 页面后,document.referrer 的值为空.出于安全性考虑,很多网站的一些重要页面(比如淘宝的登录页面)都会使用 HTTPS 协议.如果某个未登录用户在页面 A(HTTP 页面)点击了页面 B(HTTP 页面)的链接,但页面 B 需要用户登录,于是先

  • JavaScript中使用document.write向页面输出内容实例

    document.write 命令向页面输出文字 本实例使用 JavaScript 的 document.write 命令向页面输出指定的文字,代码如下: 复制代码 代码如下: <script type="text/javascript"> document.write("我是向页面输出的文字!"); </script> 将上面部分代码,用文本编辑器保存为 write.html(或 write.htm).双击 write.html 运行它(实

  • JavaScript中的Document文档对象

    Document文档对象是JavaScript中window和frames对象的一个属性,是显示于窗口或框架内的一个文档.描述当前窗口或指定窗口对象的文档.它包含了文档从<head>到</body>的内容. 用法:document (当前窗口) 或 <窗口对象>.document (指定窗口) 属性: document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fg

  • javascript中日期函数new Date()的浏览器兼容性问题

    javascript中日期函数new Date()的浏览器兼容性问题

    同一种语言javascript,在不同的浏览器中,存在语言兼容性问题,本质上是由于不同的浏览器是支持的语言标准和实现上各有差异.本文将基于new Date来创建Date对象来分析这个问题. 1.  问题的提出, 开始时间和结束时间空间无法正确的传递值 在页面中,我们使用了一个时间上的组件来开发时间选择框,但是发现在Firefox下是无法正常工作的,在Chrome下是可以正常运行的. 问题出在哪里呢? 2.  问题分析 结果分析发现是由于如下代码产生的问题: var timestart = '20

  • javascript中的document.open()方法使用介绍

    document.open()方法打开一个新的文档,并用document.write()方法编写文档的内容,然后用document.close()方法关闭文档操作,使其内容显示出来. 例如: 复制代码 代码如下: <script type="text/javascript"> window.onload=hello; function hello(){ var msg = "JavaScript真好玩!"; document.open(); docume

  • 谈谈JavaScript中浏览器兼容问题的写法小议

    前言 JavaScript中很多坑,其中对浏览器的兼容也是一个问题,本文就简略的归纳了部分针对浏览器兼容问题的写法的例子,旨在便于查找.如果读者有什么好的意见建议,请留言交流,谢谢! window窗口大小 1.在IE9+.Chrome.Firefox.Opera以及Safari中 window.innerHeight获取浏览器窗口的内部高度 window.innerWidth获取浏览器窗口的内部宽度 var msg = "窗口宽度:" + window.innerHeight + &q

  • javascript中获取选中对象的类型

    在Javascript中 利用 document.selection 可以创建 textRange. 但其实不是什么时候都可以创建的. 我们可以利用 document.selection.type 来判断当前选中的是文本还是对象. document.selection.type 返回三个值 "None" "Text" "Control" 只有当返回值是 Text 时,创建的textRange才是有效的.

随机推荐