I'm using pjax for my website navigation. I need to create a HTML back button that works exactly like the browser back button. But this one should be a simple HTML link. How can I create a pjax link that navigates to the previous page?

I've searched and all the topics seem to be about browser back button, which is not what I want

This is the code that I use for my pjax navigation

 $(function() {
        $(document).pjax('.pjax', '#pjax-container', {
            fragment: '#pjax-container',
            timeout: 9000000 ,
        });
    });

I'm using pjax for my website navigation. I need to create a HTML back button that works exactly like the browser back button. But this one should be a simple HTML link. How can I create a pjax link that navigates to the previous page?

I've searched and all the topics seem to be about browser back button, which is not what I want

This is the code that I use for my pjax navigation

 $(function() {
        $(document).pjax('.pjax', '#pjax-container', {
            fragment: '#pjax-container',
            timeout: 9000000 ,
        });
    });

• javascript
• browser
• pjax

• <a href="javascript:history,go(-1)">back</a> ? – Diodeus - James MacFarlane Commented Jan 4, 2019 at 20:18
• You can store visited URLs in an array, in a localStorage variable, then navigate to that (.pop()). – Chihuahua Enthusiast Commented Jan 4, 2019 at 20:22

3 Answers 3

You can access the browsing history via javascript. See the documentation.

If you just want a simple back link, you can use it like this:

<a href="javascript:window.history.back();">go back</a>

or like this:

<button onclick="window.history.back()">go back</button>

Alternatively if you don't want to use window.history, your application should maintain browsing history.

You can use events from the pjax library. An example you can follow:

// Variable to control history
const myAppHistory = []

// Get current url from event before ajax and put into an variable to control the history
$(document).on('pjax:beforeSend', function(event) {
    const url = event.currentTarget.URL;
    myAppHistory.push(url);
})

// Returns last page visited
function goBack() {
    const url = myAppHistory.pop()
    if (typeof url != "undefined") {
        $.pjax({url: url, container: '#main'})  
    }
}

So you use the goBack() wherever you need it.

If you want to create a simple HTML link that takes you to the previous page, you can use History API to acplish that.

You can do it easily by using History API's window.history.back() method and an anchor tag like this:

<a href="javascript:window.history.back()">Back</a>

or with a button you can do it in onclick attribute like this

<button onclick="javascript:window.history.back()">Back</button>

Yeah, Just define a function for that...

function goBack(){

   window.history.back();

}

And then call it like

<button onClick="goBack()">Back</button>

Or,

<a onClick="goBack()">Back</a>