document.referrer的用法

在JavaScript中，document對象有很多屬性，其中有3個與對網頁的請求有關的屬性，它們分别是URL、domain和referrer。

URL屬性包含頁面完整的URL，domain屬性中隻包含頁面的域名，而referrer屬性中則儲存着連結到目前頁面的那個頁面的URL。

前面兩個很好了解，而referrer屬性簡單來說就是上一個頁面的URL。那麼這個屬性具體有什麼用處呢？

在H5頁面中，我們經常要在頭部加個傳回上一個頁面按鈕，就像下面這樣的：

頁面頭部

點選左側的元素可以傳回到上一個頁面，我們可以簡單寫一段JS代碼：

var back = document.getElementById('back');   //假設該傳回按鈕元素id為back
back.onclick = function(){
    history.back();    //傳回上一個頁面，也可以寫成history.go(-1)
};
           

或者有個更簡單的方式，不用寫這麼多JS，隻需直接用a标簽表示該傳回按鈕元素：

<a id="back" href="javascript:history.back();"></a>
           

咦？上面說了這麼多，還是沒有說到document.referrer有什麼用呀！别急，前面隻是鋪墊，接下來步入正題~~~

雖說感覺上面這樣已經基本上實作了傳回上一頁的功能，但是有一種情況沒有考慮到（我們程式員還是要嚴謹一點嘛），就是假如該頁面是别人分享過來的而不是通過其他頁面進入的呢？那麼點選該按鈕将不會有任何反應，因為此時history對象中不存在曆史記錄，也就是說這是你浏覽器視窗打開時浏覽的第一個頁面。

為了優化使用者體驗，這裡通常有兩種解決方案。一種是在打開第一個頁面時不顯示傳回上一頁按鈕，另一種是點選直接跳轉到網站首頁，這可以根據産品需求來選擇合适的方案。

這裡假設選擇第一種方案，我們可以這樣寫段JS:

if(document.referrer){
    back.style.display = 'block';   //預設讓其隐藏，當referrer屬性不為空時讓其顯示
}
           

結束語： 其實判斷目前頁面是否是使用者一開始打開的頁面，方法也不止通過判斷referrer屬性這一種方法，還可以通過history.length是否為零來判斷。

本文為原創文章，轉載請注明出處，謝謝！