javascript - pjax : HTML link that works like a browser back button

Question

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

我搜索了一下，所有主题似乎都是关于浏览器后退按钮的，这不是我想要的

这是我用于 pjax 导航的代码

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

Answer 1

您可以通过 javascript 访问浏览历史记录。查看documentation .

如果你只是想要一个简单的反向链接，你可以这样使用它:

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

或者像这样:

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

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

您可以使用 pjax 库中的事件。您可以遵循的示例:

// 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()。