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 相关文章推荐
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
简单学习vue指令directive
Nov 03 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
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 函数学习简单小结
2010/07/08 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
javascript URL锚点取值方法
2009/02/25 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
手机端转换rem适应
2017/04/01 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
wxPython的安装图文教程(Windows)
2017/12/28 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
python实现石头剪刀布程序
2021/01/20 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
幼教毕业生自我鉴定
2014/01/12 职场文书
会计学生自我鉴定
2014/02/06 职场文书
党员政治学习材料
2014/05/14 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android