javascript - Ajax .load刷新/返回按钮

Question

我正在使用Ajax在div中打开部分页面。但是，当我刷新或单击后退按钮时，它只是没有做应做的事情。
我阅读并尝试了很多方法才能使其正常工作，但它只是不想工作。
我的意思是，当我按下“刷新”或“后退”按钮时，我的地址栏显示了正确的页面，但我的div确实发生了变化（例如，地址栏显示：/projects.php，但该页面/ div仍位于index.php上） ）

我只想使用后退/前进按钮，当我刷新页面时，它必须停留在同一页面上，而不要返回到第一主页。

这是我的代码，希望有人解决方案：

HTML-我的菜单

<div id="buttons">
<a class="menu" id="page1" href="#Home">Home</a><span>|</span>
<a class="menu" id="page2" href="#Projects">Projects</a><span>|</span>
<a class="menu" id="page3" href="#About">About</a><span>|</span>
<a class="menu" href="#Contact">Contact</a>
</div>

。加载部分

$(document).ready(function() {
$("#page1").click(function(){
$('#content').load('index.php #content');
});

$("#page2").click(function(){
$('#content').load('projecten.php #content');
});

$("#page3").click(function(){
$('#content').load('overons.php #content');
});
});

.haschange部分

    $(function(){

  // These two properties, set after jQuery and the hashchange event plugin are
  // loaded, only need to be used when document.domain is set (to fix the "access
  // denied" error in IE6/7).
  $.fn.hashchange.src = '../../document-domain.html'; //--- I still dont know what to do with this, but i guess its only for IE6/7 ---//
  $.fn.hashchange.domain = document.domain;

  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;

    // Set the page title based on the hash.
    document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';

    // Iterate over all nav links, setting the "selected" class as-appropriate.
    $('#buttons a').each(function(){
      var that = $(this);
      that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
    });
  })

  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();

});

Answer 1

当您仅更改片段时，页面不会重新加载或执行任何操作。

SPA（单页应用程序）就是这样-它们不会重新加载页面。这就是为什么即使#（aka片段）后的URL更改，Gmail仍会保持页面状态。打开其他文件夹和/或电子邮件，然后查看URL片段是否已更改。

您需要监听这些事件，并自己执行与$('#pageN').click()处理程序类似的操作。如果用户直接打开http://yourserver/#page2，也可以执行类似的操作。然后考虑SEO是否适用于您。

看到类似的问题：javascript - Detecting Back Button/Hash Change in URL - Stack Overflow（尝试使用HTML5 API if you can），

参见例如Intelligent State Handling · browserstate/history.js Wiki了解一些背景信息。

或创建URL路径（在#更改之前）的完全独立的页面。就像过去的美好时光。