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


Posted in Javascript onJuly 18, 2014

前段时间需要通过 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 跳转。

Javascript 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
JsDom 编程小结
Aug 09 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 #Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 #Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 #Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 #Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 #Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 #Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 #Javascript
You might like
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
php Session存储到Redis的方法
2013/11/04 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
requests和lxml实现爬虫的方法
2017/06/11 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
电气个人求职信范文
2014/02/04 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
代办委托书怎么写
2014/08/01 职场文书
个人汇报材料范文
2014/12/30 职场文书
戒赌保证书
2015/05/11 职场文书
实习单位鉴定意见
2015/06/04 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL