2014/04/02

[JavaScript]HistoryAPIのpopstateについて

16行 で pushState popState
にも書かれていたのが、最初にページにアクセスした場合、popstateメソッドがキックされてしまう。

<script>
jQuery(function($){

  if(window.history && window.history.pushState){

     $(window).on('popstate', function(e){
       console.log(e)
       // 初回アクセス時対策
       if (!e.state) return;
     });

     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>
上のページにアクセスすると、popstateが動きます。

これは、バグなのか??果たして仕様なのだろうか??

0 コメント:

コメントを投稿