Question

我有一个非常烦人的问题，但还没有弄清楚。

我正在使用＆＃34;单页应用范例＆＃34;开发一个Web系统，但没有任何框架，如角度，主干等。

我们加载页面一次，几乎所有其他页面都通过ajax加载。当用户单击浏览器的“后退”按钮时，问题就开始了。由于没有页面重新加载，在用户登录系统后，没有更改网址，当用户尝试使用浏览器中的后退按钮时，他被重定向到登录页面，导致它被重定向最后一页他＆＃34;访问了＃34;。

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

任何人都可以帮我一把吗？

谢谢！（我绝望：D）

Answer 1

以下是一个如何操作的简单示例：

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");
}

干杯;）

Answer 2

您可以考虑使用片段标识符（URL中的＃之后的内容）来跟踪＆＃34; page＆＃34;你继续，这就是一些框架所做的。大多数浏览器都可以监听对它的更改，浏览器历史记录也很好用，因此您可以在更改时检索该值并采取适当的操作。

AJAX POST浏览器历史记录

2 个答案: