Javascript 如何在window.popstate之后恢复原始内容？_Javascript_Jquery_Html_Html5 History

Javascript 如何在window.popstate之后恢复原始内容？

javascript jquery html

Javascript 如何在window.popstate之后恢复原始内容？,javascript,jquery,html,html5-history,Javascript,Jquery,Html,Html5 History,下面的代码继续向state对象推送一个新的URL，同时动态地更改页面的内容。但是，当我开始按Back按钮并返回到原始页面时，原始内容不会显示，而是保留下一页的内容。我如何做到这一点 <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ a = 0; $("p").clic

下面的代码继续向state对象推送一个新的URL，同时动态地更改页面的内容。但是，当我开始按

Back

按钮并返回到原始页面时，原始内容不会显示，而是保留下一页的内容。我如何做到这一点

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
a = 0;
  $("p").click(function(){
var stateObj = { note : ++a };
history.pushState(stateObj, "page 2", "http://localhost/foo/"+a);
$(this).text(a);    
  });
  window.addEventListener('popstate', function(e){
  if (history.state){
    $("p").text(e.state.note);
if (location.href == 'http://localhost/hist.php') { $('p').text('If you click on me, I will disappear.'); }
   }
 }, false);
$("div").click(function() { alert(e.state.note); });
  });
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<div>Hi</div>
</body>
</html>


$（文档）.ready（函数（）{
a=0；
$（“p”）。单击（函数（）{
var stateObj={注：++a}；
历史。pushState（stateObj，“第2页”http://localhost/foo/“+a）；
$（本）；
});
window.addEventListener（'popstate'，函数（e）{
如果（历史。状态）{
$（“p”）。文本（e.state.note）；
如果（location.href=='http://localhost/hist.php“）{$（'p'）.text（'如果你点击我，我将消失'）；}
}
}，假）；
$（“div”）。单击（函数（）{alert（e.state.note）；}）；
});
如果你点击我，我就会消失
你好
您有责任在popstate
上更新页面内容。浏览器仅处理状态
我有一个应用程序，在通过菜单树导航时替换页面的主要内容。我还根据新内容更新了页面标题
当我在AJAX加载的页面中来回移动时，我可以将要加载的url保存在StateObj
中。但是返回到初始页面时，没有状态，也没有保存的要还原的标题
我决定在返回初始历史状态时重新加载整个页面：
var doc_state={'title': ''};
var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;
function loadDocument(path,title){
    $('#document_area').html('<img src="spinner.gif" />');
    $('#document_area').load(path+'?ajax=true');
    document.title = title;
}

$(document).ready(function(){
    $('a.ajax_link').click(function(event){
        var path=$(this).attr('href');
        var title=$(this).text();
        doc_state['title']=title;
        event.preventDefault();
        loadDocument(path,title);
        window.history.pushState(doc_state,document.title,path);
    });
    $(window).bind('popstate', function(event){
        // Ignore inital popstate that some browsers fire on page load
        var initialPop = !popped && location.href == initialURL;
        popped = true;
        if ( initialPop ) return;

        var state = event.state;
        if (!state){
            state=history.state; // FF
        }

        if (state){
            var title= state.title;
            loadDocument(location.pathname, title);
        }
        else window.location.reload();

    });
}

var doc_state={'title'：''}；
var popped=（'state'在window.history&&window.history.state！==null），initialURL=location.href；
函数加载文档（路径、标题）{
$（“#文档_区域”）.html（“”）；
$（“#文档_区域”）.load（路径+”？ajax=true）；
document.title=标题；
}
$（文档）.ready（函数（）{
$（'a.ajax_link'）。单击（函数（事件）{
var path=$（this.attr（'href'）；
var title=$（this.text（）；
文件状态['title']=标题；
event.preventDefault（）；
加载文档（路径、标题）；
window.history.pushState（文档状态、文档标题、路径）；
});
$（窗口）.bind（'popstate'，函数（事件）{
//忽略某些浏览器在页面加载时触发的初始状态
var initialPop=！popped&&location.href==initialURL；
popped=true；
if（initialPop）返回；
var state=event.state；
如果（！状态）{
state=history.state；//FF
}
如果（州）{
var title=state.title；
loadDocument（location.pathname、title）；
}
else window.location.reload（）；
});
}
您有责任在popstate
上更新页面内容。浏览器只处理该状态
我有一个应用程序，在通过菜单树导航时替换页面的主要内容。我还根据新内容更新页面标题
当我在AJAX加载的页面中来回移动时，我可以将要加载的url保存在StateObj
中。但是回到初始页面时，没有状态，也没有要还原的已保存标题
我决定在返回初始历史状态时重新加载整个页面：
var doc_state={'title': ''};
var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;
function loadDocument(path,title){
    $('#document_area').html('<img src="spinner.gif" />');
    $('#document_area').load(path+'?ajax=true');
    document.title = title;
}

$(document).ready(function(){
    $('a.ajax_link').click(function(event){
        var path=$(this).attr('href');
        var title=$(this).text();
        doc_state['title']=title;
        event.preventDefault();
        loadDocument(path,title);
        window.history.pushState(doc_state,document.title,path);
    });
    $(window).bind('popstate', function(event){
        // Ignore inital popstate that some browsers fire on page load
        var initialPop = !popped && location.href == initialURL;
        popped = true;
        if ( initialPop ) return;

        var state = event.state;
        if (!state){
            state=history.state; // FF
        }

        if (state){
            var title= state.title;
            loadDocument(location.pathname, title);
        }
        else window.location.reload();

    });
}

var doc_state={'title'：''}；
var popped=（'state'在window.history&&window.history.state！==null），initialURL=location.href；
函数加载文档（路径、标题）{
$（“#文档_区域”）.html（“”）；
$（“#文档_区域”）.load（路径+”？ajax=true）；
document.title=标题；
}
$（文档）.ready（函数（）{
$（'a.ajax_link'）。单击（函数（事件）{
var path=$（this.attr（'href'）；
var title=$（this.text（）；
文件状态['title']=标题；
event.preventDefault（）；
加载文档（路径、标题）；
window.history.pushState（文档状态、文档标题、路径）；
});
$（窗口）.bind（'popstate'，函数（事件）{
//忽略某些浏览器在页面加载时触发的初始状态
var initialPop=！popped&&location.href==initialURL；
popped=true；
if（initialPop）返回；
var state=event.state；
如果（！状态）{
state=history.state；//FF
}
如果（州）{
var title=state.title；
loadDocument（location.pathname、title）；
}
else window.location.reload（）；
});
}