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

Answer 2

如果您想创建一个简单的HTML链接将您带到上一页，则可以使用History API来完成。

您可以通过使用History API的window.history.back()方法和类似这样的锚标记来轻松地做到这一点：

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

或通过按钮可以在onclick属性中执行此操作

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

Answer 3

是的，只需为此定义一个函数...

function goBack(){

   window.history.back();

}

然后像这样称呼

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

或者，

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

pjax：HTML链接，类似于浏览器的后退按钮

3 个答案: