前段時(shí)間需要通過(guò) JavaScript 獲取頁(yè)面的來(lái)源，這個(gè)操作很簡(jiǎn)單，使用 document.referrer 就可以獲取到了。不過(guò)，實(shí)際應(yīng)用中還是有很多意外情況，這兒簡(jiǎn)單整理一下。

首先遇到的問(wè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 了。也就是說(shuō)，如果想根據(jù) referrer 來(lái)還原用戶訪問(wèn)路徑的話，如果路徑中有 HTTP 頁(yè)面也有 HTTPS 頁(yè)面，那么這個(gè)路徑就會(huì)在從 HTTPS 到 HTTP 的地方斷掉。

這個(gè)問(wèn)題的根源是瀏覽器的安全策略，只靠 JavaScript 似乎沒(méi)有特別好的解決辦法。一個(gè)迂回的思路是使用 window.name，在 HTTPS 頁(yè)面將當(dāng)前頁(yè)面的 url 寫到 window.name 中，再在下一個(gè)頁(yè)面（HTTP 頁(yè)面）讀取。

除了這種情況，其它頁(yè)面跳轉(zhuǎn)是否都能正常取到 document.referrer 呢？我搜索了一番，發(fā)現(xiàn) 這兒 有人整理了一個(gè)列表，不過(guò)不是很全，例如沒(méi)有包括垂而不死的 IE6 的情況。于是便自己動(dòng)手，在虛擬機(jī)里裝了 N 個(gè)瀏覽器，把各種情況都測(cè)試了一下（這真是一個(gè)體力活），結(jié)果見(jiàn)下表：

上表中的“√”表示能正常取到 referrer，”” 表示 referrer 為空。

除了 IE 外，其它瀏覽器都是目前官網(wǎng)上能下載到的最新版本，其中 Safari 同時(shí)測(cè)試了 Windows 版和 Mac 版，結(jié)論一樣。

另外還有一些情況未做測(cè)試，例如點(diǎn)擊 Flash 跳轉(zhuǎn)時(shí)各瀏覽器下能否保持 referrer 等。

上表中大部分情況是符合預(yù)期的，不過(guò)似乎也有幾處需要注意的：

1、在 Safari 中，右鍵打開(kāi)鏈接會(huì)丟失 referrer；
2、在 IE 中，修改 location.href 或使用 window.open 打開(kāi)頁(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é)論是：如果你需要通過(guò) document.referrer 采集頁(yè)面訪問(wèn)來(lái)源，最好不要使用 JS 跳轉(zhuǎn)或打開(kāi)新窗口，也不要使用 meta 跳轉(zhuǎn)。

最新評(píng)論