JS實用功能-5、HTML 點擊返回按鈕返回上一頁，沒有上一頁轉到首頁

大家都知道用JS實現返回上一頁的功能很簡單，也有幾種方法，比如以下：

點擊function，下面兩種都可以

function back(){
    history.go(-1);
}

function back(){
   history.back();
}

在a標簽中實現：

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

上面三種已經基本上實現了返回上一頁的功能，但是有一種情況沒有考慮到（我們程序員還是要嚴謹一點嘛），就是假如該頁面是別人分享過來的而不是通過其他頁面進入的呢？

那么點擊該按鈕將不會有任何反應，因為此時history對象中不存在歷史記錄，也就是說這是你瀏覽器窗口打開時瀏覽的第一個頁面。

為了優化用戶體驗，這里通常有兩種解決方案。

一種是在打開第一個頁面時不顯示返回上一頁按鈕，另一種是點擊直接返回到網站首頁。

要實現這兩種，需要用到document下的一個屬性， referrer。

referrer屬性的作用是保存着鏈接到當前頁面的那個頁面的URL。

通過判斷document.referrer是否為空，來判斷是否含有歷史記錄URL。

不顯示返回按鈕：

if(document.referrer){
 $('#newheaderback').css('display','none');
}

 

返回首頁：

$('#newheaderback').click(function() {
      if (document.referrer === '') {
        location.href = '/';
        return;
      }
      history.go(-1);
    });