2013.01.24   |   Javascript

location.hashで遊んでみる

location.hashで遊んでみました。

https://dl.dropbox.com/u/7647582/tools/junk/animate_location.html
※ブラクラ注意
環境によってはブラウザが落ちるかもしれません。
自己責任でどうぞ。
アドレスバーがぐるぐると変化します。
止めたいときはタブ(Window)ごと閉じてください。
消えるまで時間かかる時もあります。

<html>
<script>
(function(){
    var i = 0;
    // この文字列がループして表示されます
    var list = "_,.-+=;#*A*#;=+-.,_  _,.-+=;#*A*#;=+-.,_ ";

    // location.hashを書き換える関数
    var rewrite = function(){
        i = (i + 1) % list.length;
        location.hash = list.slice(i,list.length) + list.slice(0,i);
    }

    // setInterbal で5ms毎に呼び出す
    setInterval(rewrite,5);
})();
</script>
</html>

やっていることは単純で、
location.hashをsetIntervalで定期的に書き換えてるだけです。
location.hashに値を代入すると、
URLの後ろに#で始まる文字列を付与できます。
ちなみにlocation.hrefを書き換えるとアドレスごと書き換えが可能ですが、
書き換えたページに飛んでしまうので、今回のような
アニメーションしたい時は全然役に立ちません。

書き換え周期をゆっくりにするとブラクラ度が減ってより安全になります。

本来はページのナビゲーションなどで利用されるLocation.hashですが
アドレスバーを書き換えられるという面で別の使い道がありそうですね。