admin 管理员组

文章数量: 1086019

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
Share Improve this question edited Jan 4, 2019 at 22:35 Rockey 4016 silver badges18 bronze badges asked Dec 22, 2018 at 21:48 hretichretic 1,1159 gold badges43 silver badges88 bronze badges 2
  • <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
Add a ment  | 

3 Answers 3

Reset to default 4 +25

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>

本文标签： javascriptpjaxHTML link that works like a browser back buttonStack Overflow

版权声明：本文标题：javascript - pjax : HTML link that works like a browser back button - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744045344a2524013.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。