javascript - Jquery Ajax 调用 HTML5 历史记录和后退按钮

Question

我已经阅读了很多相关内容，并且觉得虽然我理解了所有部分，但我无法弄清楚如何在不重做我的项目的情况下将它们组合在一起。我已经在我的网站上设置了ajax并且运行得很好。当新内容出现时，我能够在 URL 中添加 #。后退按钮可以工作，并且可以浏览所有正确的 URL，而无需重新加载页面，但 ajax 不会刷新。

这是我的按钮 HTML:

<a class="portfolioThumbnail" onclick="return false;" data-name="myPage" href="myPage.html">

    <img src="imagepath" />

</a>    <!-- portfolioThumbnail -->

这是我的 Jquery:

$('.portfolioThumbnail').on('click', function(){

 var thisProject =  $(this).attr('href')

$.ajax('http://oursite.com/' + thisProject, {
  success: function(response) {
    $('.projectWrapperReplace').html(response);
  },
  error: function() {

      alert('error');
  },
  timeout: 5500,
  beforeSend: function() {

    $(this).find('.portfolioThumbnail').addClass('loading');

  },
  complete: function() {


    $(".blurable").addClass('blur');

    $(".blurable").addClass('whiteOut');



    $('.projectWrapper').fadeIn('slow', function(){

        $('.projectWrapper').addClass('noBlur');

        window.location.hash = thisProject;


    });

  }

}); 

 });    

我的 HTML 中也有一个名为 projectWrapperReplace 的 div。看看是否有人可以帮助我完成这项工作。谢谢

Answer 1

当按下后退或前进按钮时，您需要一个事件监听器(现在，您仅在单击 .portfolioThumbnail 按钮时加载 ajax 内容)。

使 ajax 加载和状态类成为一个单独的函数，例如 hashChange()

结账 onhashchange

//call hashChange on window hash chage
window.onhashchange = hashChange;
//and also on buttonclick
$('.portfolioThumbnail').on('click', function() {
    hashChange();
})