前段时间需要通过 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的document.referrer浏览器支持、失效情况总结,包括了javascript的document.referrer浏览器支持、失效情况总结的使用技巧和注意事项,需要的朋友参考一下 在流量统计服务中都有Traffic source这个功能。Traffic source是针对访次级别的概念,换句话说,当访次建立的时候,landing page的流量来源即是该
问题内容: 如何使用JavaScript确定确切的浏览器和版本? 问题答案: 顾名思义,这将告诉您浏览器提供的名称和版本号。 当您在多个浏览器上测试新代码时,它对于对测试结果和错误结果进行排序非常方便。
问题内容: 我试图提供一种仅脚本解决方案,用于通过浏览器读取客户端计算机上文件的内容。 我有一个可与Firefox和Internet Explorer一起使用的解决方案。它不是很漂亮,但是我现在只是在尝试: 我可以打电话,它将内容写入文本区域。 有其他浏览器可以做到这一点吗? 目前,我最关心的是Safari和Chrome浏览器,但是我愿意接受其他任何浏览器的建议。 编辑: 回答问题,“为什么要这样
问题内容: 是否有人能在IE / Firefox上正常运行的脚本示例能够检测浏览器是否能够显示嵌入式Flash内容。我说可靠是因为我知道不可能100%的时间。 问题答案: SWFObject非常可靠。我已经使用它很长时间了。
介绍 Laravel Dusk 提供了富有表现力、简单易用的浏览器自动化及测试 API 。默认情况下,Dusk 不需要在你的机器上安装 JDK 或者 Selenium 。而是需要使用单独的 Chrome 驱动 进行安装。当然,你也可以自由使用其他的兼容 Selenium 的驱动程序。 安装 你应该先向你的 Composer 依赖添加 laravel/dusk : composer require
问题内容: 我正在寻找一个函数,如果用户具有移动浏览器,该函数将返回布尔值。 我知道我可以通过使用正则表达式来使用和编写该函数,但是对于不同的平台,用户代理种类繁多。我怀疑匹配所有可能的设备会很容易,并且我认为这个问题已经解决了很多次,因此应该为此类任务提供某种完整的解决方案。 我当时在看这个站点,但是可悲的是脚本太神秘了,以至于我不知道如何使用它来创建一个返回true / false的函数。 问