pjax：HTML链接，类似于浏览器的后退按钮 [英] pjax : HTML link that works like a browser back button

问题描述

我正在使用pjax进行网站导航。我需要创建一个与浏览器后退按钮完全一样的HTML后退按钮。但这应该是一个简单的HTML链接。我如何创建一个导航到上一页的pjax链接？

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

这是我用于pjax导航的代码

This is the code that I use for my pjax navigation

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

推荐答案

您可以通过javascript访问浏览历史记录。请参见文档。

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>

或类似这样：

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

或者，如果您不想使用 window.history ，您的应用程序应保留浏览历史记录。

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

您可以使用pjax库中的事件。您可以使用以下示例：

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'})  
    }
}

所以您使用 goBack（）随时随地。

这篇关于pjax：HTML链接，类似于浏览器的后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！