如何解决jQuery Ajax:前进和后退
我有以下jQuery Javascript代码:
$(".btn,.ajaxlink").click(function(e){
e.preventDefault();
var link = $(this).attr("href") + " .side-wrapper-content";
var title = $(this).attr("title");
history.pushState('','',$(this).attr("href"));
document.title = "Startpage";
$(".ajax-wrapper").scrollTop( 0 );
$(".overlay").addClass('side-open');
$(".loader").removeClass('side-open');
$("body").addClass('side-open');
$(".ajax-wrapper").load(link,function(responseTxt,statusTxt,xhr){
if(statusTxt == "success")
$(".side-wrapper").addClass('side-open');
$(".loader").addClass('side-open');
if(statusTxt == "error")
alert("Fail: The page " + link + " could not be found :( " + xhr.statusText);
});
});
addEventListener("popstate",function() {
$(".side-wrapper").removeClass('side-open');
$(".overlay").removeClass('side-open');
$("body").removeClass('side-open');
document.title = "Startpage";
});
$(".overlay,.side-wrapper-close").click(function(){
$(".side-wrapper").removeClass('side-open');
$(".overlay").removeClass('side-open');
$("body").removeClass('side-open');
history.pushState({},'../');
document.title = "Startpage";
});
我有一个单页网站。通过单击按钮(.btn)
或链接(.ajaxlink)
上的某个按钮,可以滑动.side-wrapper
,从而更改页面内容和URL。如果单击浏览器中的“后退”按钮,则.side-wrapper
会滑出并且URL会变回来。到目前为止一切顺利。
但是,当我单击浏览器中的前进按钮时,URL会更改,但是.side-warpper
仍然不可见。当我单击后退按钮两次,以此类推时,也会发生同样的情况。我知道,这是因为有第二个popstate函数。但是我找不到合适的解决方案。
你能帮我吗:)?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。