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

我已阅读了很多关于此的内容，并感觉虽然我理解了所有这些部分，但我无法弄清楚如何在不重做我的项目的情况下将它们放在一起。我在我的网站上建立并运行得非常好。当新内容进入时，我可以在URL中添加一个＃。后退按钮起作用，并在不重新加载页面的情况下遍历所有正确的URL，但ajax不刷新。Jquery Ajax调用HTML5历史记录和后退按钮

这是我的按钮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; 


    }); 

    } 

}); 

});

我有一个名为projectWrapperReplace格在我的HTML了。看看有没有人可以帮助我做到这一点。谢谢

来源

2017-05-15 Ryan Swanson

您需要一个事件监听器，用于何时按下后退或前进按钮（现在只需点击.portfolioThumbnail按钮即可加载ajax内容）。

创建Ajax负载类和状态类独立的功能，说hashChange()

结帐onhashchange

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

来源

2017-05-15 21:35:55

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

回答

相关问题