DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript中的document.referrer在各種浏覽器測試結果
JavaScript中的document.referrer在各種浏覽器測試結果
編輯:JavaScript基礎知識     

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved