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();
})

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

1 个答案: