AJAX POST 浏览器历史记录

Question

我遇到了一个非常烦人的问题，还没有解决。

我正在使用 "Single Page Application Paradigm" 开发 Web 系统，但没有使用 angular、backbone 等任何框架

我们加载一次页面，几乎所有其他页面都是通过 ajax 加载的。当我们用户单击浏览器的后退按钮时，问题就开始了。由于没有页面重新加载，在用户登录系统后，没有 url 发生变化，当用户尝试使用浏览器的后退按钮时，他被重定向到登录页面，因为这是他 "visited".

所有内容都是通过ajax加载的 post（不是很自豪）现在我们必须支持back/foward按钮。我尝试使用 HTML5 历史记录 API 但没有成功。我能够注册 'popstate' 回调并再次尝试模拟 post。但是页面中有些字段我必须恢复。我不确定我是否能找到它，但我需要的是将页面恢复到发送请求之前的状态，如快照。

谁能帮帮我？

谢谢！（我很绝望：D）

Answer 1

您可以考虑使用片段标识符（URL 中 # 之后的内容）来跟踪您正在使用的内容 "page"，这就是某些框架所做的。大多数浏览器都可以侦听对此的更改，并且浏览器历史记录可以很好地配合它，因此您可以在更改时检索该值并采取适当的措施。

Answer 2

这是一个简单的操作示例：

var state = null;
$(document).ready(function($) {   
//this is my menu... I created a simple menu just for testing :)
    $('nav li').on('click', function(){
        var title = $(this).text().toLowerCase();
        loadPage(title);
        window.history.pushState(title, null, '#'+title);
    });


    window.addEventListener('popstate', function(event) {
        state = event.state;
        console.log("State: "+state);
        if(state != null && state != "null"){
            loadPage(state);
        }
    });
});

function loadPage(page) {
    $("#content").load(page+".html");
}

干杯;)

AJAX POST 浏览器历史记录

AJAX POST Browser History

javascript

php

ajax

html

browser-history