はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

#(ハッシュ)で、Ajax でロードするページを切り替える

#(ハッシュ)で、Ajax でロードするページを切り替える

リンクの #(ハッシュ)で、Ajax でロードするページを切り替えられることがわかったのでメモ。 やりたいこととしては、ページ内アンカーリンクのAjax版です。

サンプル

index.html:
Sample, change Ajax loaded page for hash

上記のリンクをクリックすると、外部html のhash1.htmlが読み込まれます。

リンクバーで、URLの後に、#?hash2 をつけると、外部html のhash2.html を読み込みます。また、#?hash3 とすると、hash3.html を読み込みます。

また、ページ内のリンクをクリックしても、Ajax で該当ベージをロードできます。

ディクレトリ構成

ディレクトリ構成は以下です。 Ajax でhtmlディレクトリの中の外部htmlファイルを読み込みます。

  • index.html
  • html
    • hash1.html
    • hash2.html
    • hash3.html

コード解説

以下に、コードを貼りつけておきます。

#ハッシュにより、Ajaxでロードするページの切り替え(アンカーリンクのAjax版)

やっていることとしては、

var hash = window.location.hash;

で、ブラウザのリンクバーのURLのハッシュ# を取得しています。 取得したハッシュから該当ページをAjax でロードしています。

リンクバーのリンクのハッシュが変わったことは、以下のイベントでわかります。


window.onhashchange = function(){
  hash = window.location.hash;
...
}

また、以下のように、 a タグのリンク(href)をハッシュにしておき、


<li>
  <a href="#?hash1">#?hash1</a>
</li>
<li>
  <a href="#?hash2">#?hash2</a>
</li>
<li>
  <a href="#?hash3">#?hash3</a>
</li>    

js側で、リンクがクリックされたら、 href のattribute(ハッシュ) を取得してAjax で外部html をロードできるようにします。


$('li').click(function(e){
  hash = $(this).children('a').attr('href');
}

こうすると、ページ内アンカーリンクのように、リンクバーにハッシュ付きのリンクが残ります。

利点

ハッシュ付きのリンクになるので、ユーザに見せたいページを直接Ajaxでロードして見させることができます。 また、以下のように、ブックマークにも追加することができます。

外部html であるhash2.html をロードして表示。
#?hash2:

http://cartman0.github.io/changeAjaxLoadedPageForHash#?hash2

外部html であるhash3.html をロードして表示。
#?hash3:

http://cartman0.github.io/changeAjaxLoadedPageForHash#?hash3