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

所属分类: 网络编程 / JavaScript 阅读数: 1192
收藏 0 赞 0 分享

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

更多精彩内容其他人还在看

JS组件Bootstrap Table使用方法详解

这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法,具有一定的实用性,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript禁止超链接跳转的方法

这篇文章主要介绍了javascript禁止超链接跳转的方法,结合实例分析了JavaScript事件机制与鼠标事件的响应操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript实现的MD5算法完整实例

这篇文章主要介绍了JavaScript实现的MD5算法,以完整实例形式分析了基于JavaScript实现MD5算法的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Hammer.js+轮播原理实现简洁的滑屏功能

这篇文章主要介绍了Hammer.js+轮播原理实现简洁的滑屏功能的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

基于JQuery实现图片轮播效果(焦点图)

这篇文章主要为大家详细介绍了基于JQuery实现图片轮播效果,利用Jquery制作焦点图左右轮播特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript实现瀑布流加载图片原理

这篇文章主要为大家介绍了javascript实现瀑布流加载图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现的SHA-1加密算法完整实例

这篇文章主要介绍了JavaScript实现的SHA-1加密算法,以完整实例形式分析了SHA-1加密算法的具体实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Javascript实现的SHA-256加密算法完整实例

这篇文章主要介绍了Javascript实现的SHA-256加密算法,以完整实例形式分析了JavaScript实现SHA-256加密的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js实现图片层叠轮播切换效果

这篇文章主要为大家详细介绍了原生js实现图片层叠轮播切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript自动切换焦点控制效果完整实例

这篇文章主要介绍了javascript自动切换焦点控制效果的方法,结合完整实例形式分析了JavaScript响应键盘按键控制表单输入框的焦点切换功能,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多