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>

.load part

$(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 part

    $(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（单页应用程序）的事情 - 他们不会重新加载页面。这就是为什么即使#（又名片段）之后的网址发生更改，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获取一些背景信息。

或创建完全独立的网页，其中包含网址路径（#更改之前）。就像过去的美好时光一样。

Ajax .load刷新/返回按钮

1 个答案: