pushStateでURLを書き換える

Rails4でturbolinksと言う機能が増えました。
これは、Rails4上のリンクをクリックすると、実際には画面遷移せず、Ajaxでコンテンツだけ取得してbodyを書き換え、より高速に画面を切り替えるという機能です。

詳しくはこちら。
Rails 4のturbolinksについて最低でも知っておきたい事

で、実際に動かしてみるとURLも普通に書き換わるし、戻る進むボタンも有効になっているし、普通の画面遷移と見分けがつきません。

JavaScriptによるURLの書き換えはwindow.location.hashによるアンカーしか変更できなかったはずでは・・。
と思ったら、HTML5からpushState、popStateという機能が追加され、JavaScriptからURLの書き換えができるようになっていました。

ということで早速やってみました。
適当すぎるデモはこちら。
デモではボタンを押すとURLが変わりますが、実際には画面遷移していません。

参考にしたのは「AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた

以下のコードでURLが変わります。何という簡単さ!

window.history.pushState(null,null,"URL");

戻るボタンなどは次のコードで対応できます。

  onpopstate = function(event) {
    // 戻る、進むボタンで呼び出される。
    // location.pathnameでURLがとれるので、そのURLをみて適切なコンテンツを表示
  }

簡単ですね!

No Comments

Post a Comment

コメントを投稿するには、下の計算の答えを入力する必要があります。答えは半角数字で入力してください。 * Time limit is exhausted. Please reload the CAPTCHA.