2010年12月アーカイブ

先日、以前の会社の同僚からスカイプが入りまして、
「ajaxで#を使ってブラウザに履歴を残す方法がいまいちわからない」
ということでしたので、簡単なサンプルを送りました。

使う機会がなかったので、あまり詳しく知らなかったんですが、
せっかく書いてみましたので、掲載してみます。
車輪の再発明ですがキニシナイ。


//init
//window.onloadとかに追加してください。
function hashinit(){
  hashcheck(window.location.hash);
}


//main
function hashcheck(v){
    data = v.split('/');
    if(v) alert(data[1]);
}


//listener
function onhashchange(cbf){
    var f = function (v){
        var _v = v;
        var t = setTimeout(
            function (){
                clearTimeout(t);
                v = window.location.hash;
                if(_v != v) cbf(v);
                f(v);
            },100
        );
    }
    f(window.location.hash);
}
onhashchange(hashcheck);



サンプルファイルを置いておきます。
よろしければご自由にどうぞ。
ハッシュURL　サンプル
（FF　IE7以上 Chromeで動作確認）



簡単な解説ですが、
基本的にはアンカータグで動作させます。
なので、1枚に収まるようなデザインに向いてます。
（スクロールが発生するようなページには向きません）

window.location.hashの中に、#以降のURLが入ります。
//listener　の部分で、その中身が変わるのを監視します。

で、そのままでは最初から#ありのURLにアクセスされたときにスルーされるので
//init　の部分のアクションを書きます。

/で区切ったりするといろいろ使い勝手がよくなるので、
//main　の部分で、#以降を「/」で分解します。

あとは適当に他のアクションに。


挙動をまとめるとこんな感じです。

#なし　#リンククリックで動作します
#なし　onloadでは動作しません
#あり　#リンククリックで動作します
#あり　セルフリンククリックでは動作しません
#あり　onloadで動作します。


余談ですが、#!を使うと、SEO的に幸せになれるかもです。
（1ページ作んないといけませんけど）
http://code.google.com/intl/ja/web/ajaxcrawling/docs/getting-started.html


もう師走です。はやいものですね。