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

首先遇到的問題，是從 HTTPS 頁面轉(zhuǎn)到 HTTP 頁面后，document.referrer 的值為空。出于安全性考慮，很多網(wǎng)站的一些重要頁面（比如淘寶的登錄頁面）都會(huì)使用 HTTPS 協(xié)議。如果某個(gè)未登錄用戶在頁面 A（HTTP 頁面）點(diǎn)擊了頁面 B（HTTP 頁面）的鏈接，但頁面 B 需要用戶登錄，于是先跳到登錄頁面 （HTTPS 頁面），登錄完成之后再跳回 B（HTTP 頁面），這時(shí)你會(huì)發(fā)現(xiàn) B 頁面上取不到 document.referrer 了。也就是說，如果想根據(jù) referrer 來還原用戶訪問路徑的話，如果路徑中有 HTTP 頁面也有 HTTPS 頁面，那么這個(gè)路徑就會(huì)在從 HTTPS 到 HTTP 的地方斷掉。

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

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

上表中的“√”表示能正常取到 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 打開頁面會(huì)丟失 referrer（IE 9 有一點(diǎn)例外，使用 location.href 跳轉(zhuǎn)不會(huì)丟失 referrer）；
3、使用 meta 跳轉(zhuǎn)時(shí)，IE / Firefox 下會(huì)丟失 referrer。

最后，一個(gè)簡單的結(jié)論是：如果你需要通過 document.referrer 采集頁面訪問來源，最好不要使用 JS 跳轉(zhuǎn)或打開新窗口，也不要使用 meta 跳轉(zhuǎn)。

最新評(píng)論