pjax : HTML link that works like a browser back button

user_5796284 0
Viewed 4157

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 ,
        });
    });
pjax browser javascript
3 Answers

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.

user_42143120

If you want to create a simple HTML link that takes you to the previous page, you can use History API to accomplish 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>
user_72569300

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