Jquery Ajax 调用 HTML5 历史和后退按钮

Question

我读了很多这方面的资料，觉得虽然我了解所有部分，但我无法弄清楚如何在不重做我的项目的情况下将它们组合在一起。我已经 ajax 设置并且在我的网站上运行得非常好。当新内容出现时，我能够在 URL 中添加一个 #。后退按钮有效，并且在不重新加载页面的情况下浏览所有正确的 URLs，但是 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();
})

Jquery Ajax 调用 HTML5 历史和后退按钮

Jquery Ajax call HTML5 History and back button

html

javascript

ajax

jquery

html5-history