[JavaScript]HistoryAPIを試してみる

ちょっと触る機会があったので、試してみた。

<script>
jQuery(function($){

  if(window.history && window.history.pushState){
     var $main = $('#main');
     $('#toBar').on('click',function(e){
       e.preventDefault();
       history.pushState(
         '',
         null,
         location.protocol + '//' + location.host + '/' + 'bar.html'
       );
       $main.text('ただいま、bar.html');
     });

     $('#toFoo').on('click',function(e){
       e.preventDefault();
       history.pushState(
         '',
         null,
         location.protocol + '//' + location.host + '/' + 'foo.html'
       );
       $main.text('ただいま、foo.html');
     });

     $('#toSample').on('click',function(e){
       e.preventDefault();
       history.pushState(
         '',
         null,
         location.protocol + '//' + location.host + '/' + 'sample.html'
       );
       $main.text('ただいま、sample.html');
     });

   }
});
</script>
<div id="main">ただいま、sample.htmlです。</div>
<div id="toBar">クリック後、bar.htmlになります。</div>
<div id="toFoo">クリック後、foo.htmlになります。</div>
<div id="toSample">元に戻します！！</div>

これは、すごい。

実際に、「foo.html」や「bar.html」がなくてもURLが書き換えられている。しかも、リクエストをせずに。

ただ、ここで、気になるのは、404のページに動的に変更してどうするんだろう？
ajaxが何かでコンテンツを書き換えない限り意味がないと思うのだが。

だから、pjaxという言葉があるのかなとしみじみ考えたり。

参考URL
16行 で pushState popState