如何在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>

我希望他们能够做的是，显然允许用户前进和后退。
然而，如果满足以下条件之一，我想禁用这些按钮：

如果满足以下条件之一，禁用后退按钮：

• 历史记录中没有上一页
• 返回的url将离开我的网站

如果满足以下条件之一，禁用前进按钮：

• 历史记录中没有下一页

目前为止我所做的不多。

<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>

- user2636556

Answer 1

为了使“返回”按钮工作，您可以使用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);
});

关于“前进”按钮 - 没有一种正常的方法来检查是否有“前进”按钮。它是一个“硬件”浏览器按钮，API中没有这样的方法。我猜这与安全有关。

但是，您可以简单地执行history.go(1);。如果没有这样的页面，它将不起作用。

- Yeldar Kurmangaliyev