如何控制jQuery中的後退和前進按鈕

Question

在我的響應式網站中，我的移動視圖中顯示了這些按鈕。我試圖讓他們瀏覽我的頁面。

<div class="row" id="bottomNav"> 
    <div class="col-xs-4 text-center"> 
     <a href="#" onclick="history.go(-1); return false;" id="back-button"> 
      <i class="fa fa-arrow-left"></i> 
     </a> 
    </div> 
    <div class="col-xs-4 text-center"> 
     <a href="#"> 
      <i class="fa fa-refresh"></i> 
     </a> 
    </div> 
    <div class="col-xs-4 text-center"> 
     <a href="#" onclick="history.go(1); return false;" id="forward-button"> 
      <i class="fa fa-arrow-right"></i> 
     </a> 
    </div> 
</div> 

我希望他們做的是，顯然允許用戶前進和後退。
不過，我想禁用這些按鈕，如果：

禁用返回按鈕，如果：

• 有在歷史上沒有前一頁
• 回網址會離開我的網站

禁用轉發 button if：

• 有一個歷史

沒有下一頁這是我迄今所做的。這並不多。

<script> 
    alert(document.referrer); 
    alert(window.location.hostname); 
    var str = window.location.hostname; 
    //if back page is own page 
    if (str.search(document.referrer) >= 0) { 
     history.go(-1); 
    } 
    else { 
     $('#back-button').prop('disabled', false); 
    } 
</script> 

Answer 1

爲了使back按鈕的工作，你可以使用document.referrer：

function isBackAvailable() 
{ 
    if (document.referrer === "") return false; 
    if (document.referrer.substr(0, 16) !== "http://localhost") return false; 
    // it can be (!document.referrer.startsWith("http://domain.com")) in ES6 

    return true; 
} 

function goBack() 
{ 
    if (isBackAvailable()) { 
     history.go(-1); 
    } 
} 

$(document).ready(function() { 
    $("#back-button") 
     .prop('disabled', isBackAvailable()) 
     .on('click', goBack); 
}); 

什麼forward按鈕 - 有檢查，如果前進按鈕可沒有正常的途徑。它是一個「硬件」瀏覽器按鈕，在API中根本沒有這種方法。我想，這與安全有關。

但是，您可以簡單地執行history.go(1);。如果沒有這樣的頁面，它什麼都不會做。