JavaScript中的document.referrer在各種瀏覽器測試結果_基礎知識

前段時間需要透過 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 跳轉。