如何控制jQuery中的后退和前进按钮

How to control back and forward button in jQuery

本文关键字：按钮 何控制 控制 jQuery      更新时间：2023-09-26

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

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

要使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);。如果没有这样的页面，它将毫无作用。

相关文章：