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歷史記錄和後退按鈕

回答

相關問題