首頁  >  文章  >  web前端  >  JavaScript中的document.referrer在各種瀏覽器測試結果_基礎知識

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

WBOY
WBOY原創
2016-05-16 16:41:431379瀏覽

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn