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

Question

In my responsive website, I have these buttons that show on my mobile views. I am trying to make them navigate through my page.

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

What I want them to do is, obviously allow the user to go back and forward.
However, I would like to disable these buttons if:

Disable Back button if:

• there is no previous page in a history
• back url will leave my website

Disable Forward button if:

• there is no next page in a history

This is what I have done so far. It's not much.

<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

To make back button work, you can use 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);
});

What about forward button - there is no normal way to check if forward button is available. It is a "hardware" browser button and there is simply no such method in API. I guess, it is related to security somehow.

However, you can simply execute history.go(1); . It will do nothing if there is no such page.