JavaScript中的document.referrer在各種瀏覽器測(cè)試結(jié)果
前段時(shí)間需要通過 JavaScript 獲取頁(yè)面的來源,這個(gè)操作很簡(jiǎn)單,使用 document.referrer 就可以獲取到了。不過,實(shí)際應(yīng)用中還是有很多意外情況,這兒簡(jiǎn)單整理一下。
首先遇到的問題,是從 HTTPS 頁(yè)面轉(zhuǎn)到 HTTP 頁(yè)面后,document.referrer 的值為空。出于安全性考慮,很多網(wǎng)站的一些重要頁(yè)面(比如淘寶的登錄頁(yè)面)都會(huì)使用 HTTPS 協(xié)議。如果某個(gè)未登錄用戶在頁(yè)面 A(HTTP 頁(yè)面)點(diǎn)擊了頁(yè)面 B(HTTP 頁(yè)面)的鏈接,但頁(yè)面 B 需要用戶登錄,于是先跳到登錄頁(yè)面 (HTTPS 頁(yè)面),登錄完成之后再跳回 B(HTTP 頁(yè)面),這時(shí)你會(huì)發(fā)現(xiàn) B 頁(yè)面上取不到 document.referrer 了。也就是說,如果想根據(jù) referrer 來還原用戶訪問路徑的話,如果路徑中有 HTTP 頁(yè)面也有 HTTPS 頁(yè)面,那么這個(gè)路徑就會(huì)在從 HTTPS 到 HTTP 的地方斷掉。
這個(gè)問題的根源是瀏覽器的安全策略,只靠 JavaScript 似乎沒有特別好的解決辦法。一個(gè)迂回的思路是使用 window.name,在 HTTPS 頁(yè)面將當(dāng)前頁(yè)面的 url 寫到 window.name 中,再在下一個(gè)頁(yè)面(HTTP 頁(yè)面)讀取。
除了這種情況,其它頁(yè)面跳轉(zhuǎn)是否都能正常取到 document.referrer 呢?我搜索了一番,發(fā)現(xiàn) 這兒 有人整理了一個(gè)列表,不過不是很全,例如沒有包括垂而不死的 IE6 的情況。于是便自己動(dòng)手,在虛擬機(jī)里裝了 N 個(gè)瀏覽器,把各種情況都測(cè)試了一下(這真是一個(gè)體力活),結(jié)果見下表:
| 操作 | IE6 | IE7 | IE8 | IE9 | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|---|---|---|
| 直接在地址欄輸入U(xiǎn)RL | “” | “” | “” | “” | “” | “” | “” | “” |
| 從書簽訪問URL | “” | “” | “” | “” | “” | “” | “” | “” |
| 從頁(yè)面A點(diǎn)擊超鏈接,跳轉(zhuǎn)到頁(yè)面B(target=”_self”) | √ | √ | √ | √ | √ | √ | √ | √ |
| 從頁(yè)面A點(diǎn)擊超鏈接,跳轉(zhuǎn)到頁(yè)面B(target=”_blank”) | √ | √ | √ | √ | √ | √ | √ | √ |
| 從頁(yè)面A右鍵單擊超鏈接,在新標(biāo)簽頁(yè)中打開頁(yè)面B | - | √ | √ | √ | √ | √ | √ | “” |
| 從頁(yè)面A右鍵單擊超鏈接,在新窗口中打開頁(yè)面B | √ | √ | √ | √ | √ | √ | √ | “” |
| 拖動(dòng)鏈接到地址欄 | “” | 無(wú)法拖動(dòng) | 無(wú)法拖動(dòng) | “” | “” | “” | “” | “” |
| 拖動(dòng)鏈接到標(biāo)簽欄 | - | “” | “” | “” | “” | “” | “” | “” |
| 使用瀏覽器的前進(jìn)、后退按鈕 | √ | √ | √ | √ | √ | √ | √ | √ |
| JS 修改 location.href | “” | “” | “” | √ | √ | √ | √ | √ |
| JS 使用 window.open | “” | “” | “” | “” | √ | √ | √ | √ |
| 服務(wù)器重定向(302跳轉(zhuǎn)) | 定向之前的頁(yè)面 | 定向之前的頁(yè)面 | 定向之前的頁(yè)面 | 定向之前的頁(yè)面 | 定向之前的頁(yè)面 | 定向之前的頁(yè)面 | 定向之前的頁(yè)面 | 定向之前的頁(yè)面 |
| 頁(yè)面 Meta Refresh | “” | “” | “” | “” | “” | 轉(zhuǎn)向頁(yè) | 轉(zhuǎn)向頁(yè) | 轉(zhuǎn)向頁(yè) |
上表中的“√”表示能正常取到 referrer,”” 表示 referrer 為空。
除了 IE 外,其它瀏覽器都是目前官網(wǎng)上能下載到的最新版本,其中 Safari 同時(shí)測(cè)試了 Windows 版和 Mac 版,結(jié)論一樣。
另外還有一些情況未做測(cè)試,例如點(diǎn)擊 Flash 跳轉(zhuǎn)時(shí)各瀏覽器下能否保持 referrer 等。
上表中大部分情況是符合預(yù)期的,不過似乎也有幾處需要注意的:
1、在 Safari 中,右鍵打開鏈接會(huì)丟失 referrer;
2、在 IE 中,修改 location.href 或使用 window.open 打開頁(yè)面會(huì)丟失 referrer(IE 9 有一點(diǎn)例外,使用 location.href 跳轉(zhuǎn)不會(huì)丟失 referrer);
3、使用 meta 跳轉(zhuǎn)時(shí),IE / Firefox 下會(huì)丟失 referrer。
最后,一個(gè)簡(jiǎn)單的結(jié)論是:如果你需要通過 document.referrer 采集頁(yè)面訪問來源,最好不要使用 JS 跳轉(zhuǎn)或打開新窗口,也不要使用 meta 跳轉(zhuǎn)。
相關(guān)文章
結(jié)合代碼圖文講解JavaScript中的作用域與作用域鏈
JavaScript雖然沒有類,但變量和一些函數(shù)卻同樣擁有局部作用域的制約,下面結(jié)合代碼圖文講解JavaScript中的作用域與作用域鏈:2016-07-07
JavaScript高級(jí)程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記8 js函數(shù)(中)
接著看函數(shù)——這個(gè)具有魔幻色彩的對(duì)象。在上篇文章中說函數(shù)內(nèi)部屬性時(shí),還遺留了一個(gè)this內(nèi)部屬性沒有解釋,不過在說this之前,我想先說一說執(zhí)行環(huán)境和作用域的概念2012-10-10
Javascript操作dom對(duì)象之select全面解析
下面小編就為大家?guī)硪黄狫avascript操作dom對(duì)象之select全面解析。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
JavaScript中的document.referrer在各種瀏覽器測(cè)試結(jié)果
這篇文章主要介紹了JavaScript中的document.referrer在各種瀏覽器測(cè)試結(jié)果,包括在多種情況下每個(gè)瀏覽器能否用document.referrer取到值,非常珍貴的測(cè)試結(jié)果,需要的朋友可以參考下2014-07-07
JavaScript 學(xué)習(xí)筆記之操作符(續(xù))
上篇文章我們講解了javascript的操作符中的一元操作符、位操作符、布爾操作符,今天我們繼續(xù)講解剩下的幾個(gè)操作符,包括乘性操作符、加性操作符、相等操作符、條件操作符、賦值操作符、逗號(hào)操作符,小伙伴們仔細(xì)研讀下吧,對(duì)提高自己對(duì)于javascript的理解很有幫助。2015-01-01
javascript XMLHttpRequest對(duì)象全面剖析
通過不必把Web頁(yè)面寄送到服務(wù)器而實(shí)現(xiàn)數(shù)據(jù)傳送,XMLHttpRequest對(duì)象為客戶端與服務(wù)器之間提供了一種動(dòng)態(tài)的交互能力。2010-04-04

