AJAX：使用history.pushState获取页面锚点

Question

我建立了一个ajax网站，因此我的着装页面保持为index.php，因此要获取我的页面着装，如www.example / about.html，我使用history.pushState使其运作良好，当我单击链接按钮，我的问题是我不能使用浏览器的刷新按钮或后退按钮（我的地址更改，但页面不可用）。

这是我的ajax页面：

 $(document).ready(function(){ $("#menu a").click(function(){ var page=$(this).attr("href"); $.ajax({ url: "pages/"+page, cache:false, success:function(html){ afficher(html); history.pushState({key : 'value'}, 'hash', page); }, error:function(XMLHttpRequest,textStatus, errorThrown){ afficher("erreur lors du chagement de la page"); } }); return false; }); $('#container').on('click', '.vs-transform a', function(){ //Second ajax request page=$(this).attr("href"); $.ajax({ url: "pages/"+page, cache:false, success:function(html){ afficher(html); history.pushState({key : 'value'}, 'hash', page); }, error:function(XMLHttpRequest,textStatus, errorThrown){ afficher("erreur lors du chagement de la page"); } }); return false; }); window.onpopstate = function(event){ if(event.state === null){ alert('return'); } }; }); function afficher(data){ $("#container").fadeOut(500,function(){ $("#container").empty(); $("#container").append(data); $("#container").fadeIn(500); }); } 

Answer 1

history.pushstate旨在将URL添加到浏览器的URL历史记录中，这样，当您单击后退或前进按钮时，将恢复已保存的页面状态和页面内容。

但是，当您单击刷新按钮时，浏览器仅重新加载保存的URL（忽略历史记录中的保存页面）。 如果这是一个伪造的URL，您将收到404页面未找到错误。

从本质上讲，推送到历史记录的所有URL应该是服务器可以处理的有效URL（假设您希望允许按下刷新按钮）。