pjax: 像浏览器返回按钮一样工作的HTML链接

Question

我正在使用pjax来进行网站导航。我需要创建一个HTML返回按钮，它的工作方式与浏览器的返回按钮完全相同。但是这个按钮应该是一个简单的HTML链接。我该如何创建一个pjax链接，以导航到上一页？

我已经搜索过了，所有的主题似乎都是关于浏览器的返回按钮，这不是我想要的。

这是我用于我的pjax导航的代码。

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

- hretic

---

<a href="javascript:history,go(-1)">back</a>？请返回。 - Diodeus - James MacFarlane

你可以将已访问的URL存储在一个数组中或一个localStorage变量中，然后导航到该URL（.pop()）。 - chakeda

Answer 1

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

如果您只想要一个简单的返回链接，可以像这样使用：

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

- Abraão Levi

Answer 2

如果您想创建一个简单的HTML链接，以返回上一页，您可以使用历史API来实现。

您可以通过使用历史API的window.history.back()方法和类似以下的锚标签轻松完成：

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

或者您可以在按钮上使用onclick属性来执行此操作，例如：

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

- Rockey

Answer 3

没错，只需要为此定义一个函数...

function goBack(){

   window.history.back();

}

然后像这样调用它

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

或者，

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

- Darshana Pathum