JS擷取上一訪問頁面URL地址document.referrer實踐2

標籤：efault   新版本   str   新視窗   replace   無法   擷取   toc   地方   

一、JS擷取前一個訪問頁面的URL地址document.referrer

要擷取前一個訪問頁面的URL地址前後端語言都可以，例如PHP的是$_SERVER[‘HTTP_REFERER‘]，JavaScript的就是document.referrer。

我們平常開發，雖然和URL打交道也算比較頻繁，但是，似乎很少使用document.referrer。我起初以為是相容性不好，後來測試發現ie7都支援，那就奇怪了，為何document.referrer用的不多呢？

我想了一下，可能有下面幾個原因：

1. 後端小夥伴幫我們搞定了相關需求；
2. 只有一些訪問資料統計指令碼才非常在意上一個訪問頁面的url地址是什麼；
3. 如果我們希望實現的功能是返回上一頁，可以使用history.go(-1)或者history.back()，我們並不需要知道上一個訪問頁面具體的地址是什麼。

綜合以上幾點，導致平時開發很少使用document.referrer。

但是最近做了一個移動端項目，是我第一次在正式項目中使用document.referrer，這裡跟大家分享一下相關的實踐。

情境是這樣的，移動端無論是原生app還是傳統的網頁，返回上頁是一個比較強烈的需求，如下所示：

幾乎所有的內頁都有這麼一個返回上一頁的按鈕，例如這個頁面（點擊體驗）。

此返回上一頁相關HTML代碼如下：

<a href="javascript:history.go(-1)" class="header-back jsBack">返回</a>

在大部分情境下，上面辦法可以滿足我們的互動需求，但是，在有些時候，上面的代碼就有些心有力而氣不足，因為當前頁面的referrer並不總是存在的。

比方說使用者是通過分享進來的，直接進入了內頁，此時是沒有上一頁的，返回按鈕再怎麼點擊都沒有任何反應，就會讓使用者很奇怪，十有八九會認為是實現了bug，則會讓使用者對產品的品質抱有疑慮，那問題可就大了。

怎麼辦呢！後來我想了一招，那就是如果發現瀏覽器沒有上一頁來源資訊，我們就把返回按鈕的連結改成首頁的連結地址，這樣無論什麼時候，使用者點擊返回按鈕一定是會有反應的，並且返回首頁從邏輯上講也是合情合理的。而這裡判斷是否有沒有來源資訊就是使用這裡的document.referrer，當瀏覽器得不到上一頁的來源資訊的時候，document.referrer的傳回值就是Null 字元串‘‘，於是乎，就有類似下面的代碼：

if (document.referrer === ‘‘) {    // 沒有來源頁面資訊的時候，改成首頁URL地址    $(‘.jsBack‘).attr(‘href‘, ‘/‘);}

於是乎，返回按鈕的邏輯就天衣無縫了。

二、哪些情境下無法獲得上一頁referrer資訊

1. 直接在瀏覽器地址欄中輸入地址；
2. 使用location.reload()重新整理（location.href或者location.replace()重新整理有資訊）；
3. 在對話方塊中，點選連結進入自身的瀏覽器；
4. 掃碼進入QQ或者的瀏覽器；
5. 直接新視窗開啟一個頁面； 2017.8.3更新 新版本Chrome測試，新視窗頁面依然有document.referrer
6. 從https的網站直接進入一個http協議的網站（Chrome下親測）；
7. a標籤設定rel="noreferrer"（相容IE7+）；
8. meta標籤來控制不讓瀏覽器發送referer；

   例如：

   <meta content="never" name="referrer">

   相容性如：
   

   iOS瀏覽器目前還是使用的老版本的規範值，包括：never, always, origin, default。對於Android瀏覽器，5.0版本開始支援。基本上，在移動端，使用meta標籤來控制referer資訊的發送與否已經可以在實際項目中使用了。

9. 等等。

有人可能迫切想知道如何讓從https的網站直接進入一個http協議的網站也有document.referrer資訊，這方面並不是我擅長的地方，所以我也不清楚應該如何解決此問題，或許需要伺服器配置那邊配合點什麼。

更新於翌日
下面是小新同行的真知灼見：

HTTPS turns off HTTP Referrers to HTTP websites. (預設是關閉的，安全原因。)
開啟的話在meta裡設定，可能現在的流行的最新版瀏覽器安全色會好點！
參考：

http://smerity.com/articles/2013/where_did_all_the_http_referrers_go.html

官方這麼說的：

https://www.w3.org/Protocols/rfc2616/rfc2616-sec15.html#sec15.1.3

JS擷取上一訪問頁面URL地址document.referrer實踐2