如何在jQuery中控制后退和前进按钮答案

【问题标题】：How to control back and forward button in jQuery如何在jQuery中控制后退和前进按钮
【发布时间】：2015-10-30 04:52:50
【问题描述】：

在我的响应式网站中，我的移动视图上显示了这些按钮。我试图让他们浏览我的页面。

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

我希望他们做的是，显然允许用户前后移动。
但是，如果出现以下情况，我想禁用这些按钮：

在以下情况下禁用返回按钮：

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

在以下情况下禁用转发按钮：

这是我到目前为止所做的。不多。

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

【问题讨论】：

标签： javascript jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案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);。如果没有这样的页面，它将什么都不做。

【讨论】：