AjaxでUnique URLを使い、戻る/進むボタンにも対応させる

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

GmailやTwitterでは、Ajaxによる非同期なやりとりを行い
現在の状態をアンカー(window.location.hash)に書きこむことで保存したURLにも反応するようになっています。

以前私のブログでも書いた Unique URL ってやつですね。
しかしこれだけではまだ不十分です。
戻る/進むボタンが反応しないという問題が残っています。

なぜ反応しないかというと、ハッシュが変更されたさいにそれを知る手段がないからです。

なのでその対処法をざっくりとプログラムで書いてみました。

Sample

今のハッシュタグと前回のハッシュタグが表示されるようになっています。
進む/戻るボタンにも反応しているのが分かると思います。

http://tmlife.net/examples/hash-observe/index.html

Source

script部分のソースです。

ザックリとした流れは、
  1. 変更があった際に実行する関数を登録(ここにハッシュの値に応じたAjax(検索&検索結果を表示したりする)処理関数を登録する)
  2. setIntervalで常にwindow.location.hashを監視
  3. 監視処理内で以前のハッシュと比較して違っていたら登録されている関数を実行し、現在のハッシュを保持する

細かくはソース内のコメントに書いています。

<script type="text/javascript">

var $id = function(id) { return document.getElementById(id); }


window.onload = function()
{
    // ページリロード確認(タイマーがリセットされていなければページリロードが起きていないということ)
    var timer = 0;
    setInterval(function(){
        ++timer;
        $id("timer").innerHTML = timer;
    }, 1000);
    
    // ハッシュ変更時に実行する関数を登録
    HashObserve.addFunc(function(now_hash, prev_hash){
        $id("now-hash").innerHTML = now_hash;
        $id("prev-hash").innerHTML = prev_hash;
    });
    
    // 監視を開始
    setInterval(HashObserve.observe, 1000/30);
}


/**
 * ハッシュ監視クラス(static class)
 */
var HashObserve = {
    funcList: [],   // ハッシュ変更時に実行する関数リスト
    prevHash: "",   // 前回のハッシュ
    
    /**
     * 監視
     */
    observe: function()
    {
        // 前回のハッシュと比較
        if (HashObserve.prevHash!==window.location.hash) {
            // 登録されている関数を実行
            for (var i=0; i<HashObserve.funcList.length; ++i) {
                HashObserve.funcList[i](window.location.hash, HashObserve.prevHash);
            }
            // 前回のハッシュを更新
            HashObserve.prevHash=window.location.hash;
        }
    },
    
    /**
     * ハッシュ変更時に実行する関数を登録
     * @param {Object} fn
     */
    addFunc: function(fn)
    {
        HashObserve.funcList.push(fn);
    }
};


</script>
    

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT