AJAX POST 浏览器历史记录
AJAX POST Browser History
我遇到了一个非常烦人的问题,还没有弄清楚。
我正在使用"单页应用程序范式"开发一个 Web 系统,但没有任何框架,如 angular、backbone 等。
我们加载页面一次,几乎所有其他页面都是通过 ajax 加载的。当我们用户单击浏览器的"后退"按钮时,问题就开始了。由于没有页面重新加载,因此在用户登录系统后,不会更改任何URL,并且当用户尝试使用浏览器中的后退按钮时,他会被重定向到登录页面,因为这是他"访问"的最后一页。
所有内容都是通过ajax帖子加载的(不是很自豪),现在我们必须支持后退/后退按钮。我尝试使用HTML5历史API,但没有成功。我能够注册"popstate"回调并尝试再次模拟帖子。但是页面中有一些字段我必须恢复。我不确定我是否可以找到它,但我需要的是将页面恢复到发送请求之前的状态,例如快照。
谁能帮我一把?
谢谢!(我很绝望:D)
下面是一个如何做到这一点的简单示例:
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");
}
干杯;)
你可以考虑使用片段标识符(URL中#后面的东西)来跟踪你所在的"页面",这就是一些框架所做的。大多数浏览器都可以侦听对此的更改,并且浏览器历史记录与它配合得很好,因此您可以在它更改时检索值并采取适当的操作。
相关文章:
- window.location替换并传递URL历史记录条目中的变量
- Javascript历史记录转换为php行
- 浏览器何时记录历史记录
- 输入类型按钮返回历史记录并返回顶部
- HTML5历史记录-返回上一个完整页面按钮
- Angular JS-如何强制浏览器记录历史以便快速路由
- asp.net网站文件下载历史记录
- 使用Ajax的后退按钮历史记录,URL中没有散列
- 历史记录和通过JavaScript修改的HTML
- Javascript:历史记录未加载页面
- 通过js设置页面历史记录和页面内容
- 如果没有历史记录,我如何隐藏图像或按钮onclick=;历史.go(-1);
- 将HTML表单发布到iframe会导致浏览器历史记录出现问题
- 如何防止浏览器在历史记录中缓存HTML
- 如何将新的stateObject添加或附加到历史记录中
- 检查浏览器后退按钮历史记录
- React-router 在添加历史记录后不会渲染组件
- 如何返回可用的历史记录状态数
- 引导选项卡不适用于历史记录.返回选项
- 非用户发起的操作触发的导航没有记录历史