HTML5のHistoryAPIでAjaxの非同期通信をコントロール

ちょっと備忘録です。

お客様のサイトで、「続きを見る」などでAjaxの非同期通信を使いどんどんコンテンツを表示させる機能を実装しています。

ただ、ページ遷移し、戻ると初期画面に戻ってしまうので、HTML5のHistoryAPIを実装してみました。

色々調べたのですが、なかなかページ遷移、戻るの挙動について解説しているサイトが見当たらなかったので、結構悩みました。

仕様

トップページでAjaxの非同期通信を行い、写真をどんどん表示

写真をクリックすると詳細ページに遷移

詳細ページからブラウザの「戻る」でトップページが写真が開いている前の状態にしたい

実装例

function(){
$.ajax({
url: './index_ajax.php',
data: parms,
type: 'get',
success: function(msg) {
if ( msg != "") {
$(#写真を追加す場所).append(msg);
    history.pushState("index_State", null, null);

ちょっといろいろと省いていますが今回導入したのは一番最終行です。

Ajaxでindex_ajax.phpの値を取得しappendしたときにhistory.pushState関数で履歴を追加しています。

history.pushState(state,title,url)

という引数を持てますが、今回履歴をのこしたのはstateだけです。

次に、写真の詳細ページから戻るときの挙動の制御です。

window.addEventListener("popstate", function(event){
if(event.state == "indexState"){
$(#写真を追加す場所).append(msg); } });

こちらはhistory.popState関数を使います。

先に設定したstateの値が真であるときだけ、戻ったときにAjaxの非同期通信後の表示にさせます。

問題は書き方はわかったのですが、細かい内容を理解していないこと。

ちょっと時間のある時にまた勉強しておきます。