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>

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

如果符合以下情况，请停用后退按钮：

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

如果符合以下情况，请停用转发按钮：

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

<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按钮怎么样 - 没有正常方法可以检查前进按钮是否可用。这是一个＆＃34;硬件＆＃34;浏览器按钮，API中根本没有这样的方法。我猜，它与安全性有某种关系。

但是，您只需执行history.go(1);即可。如果没有这样的页面，它什么都不做。

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

1 个答案: