Article

ブログ

2015/08/01

HTML5のHistory APIを用いてブラウザの戻る処理をハックする

こんにちは、本間です。

今回はHTML5のHistory APIについてです。通常のブラウザの遷移では、リンクをクリックしてサーバーとやりとりし、HTMLを返すということでそれに対する「戻る」があるかと思います。

HTML5

しかし、JavaScriptを駆使してページ遷移をさせずにAjaxでコンテンツを更新している場合、戻るを押されるとJavaScriptで更新したコンテンツは戻るとしてカウントされないため、ユーザーにとって違和感のあるページとなってしまいます。

もうちょっとわかりやすく説明しますと、 ” Page1 -> Page2 -> Page2内のJavaScript更新1 -> Page2のJavaScript更新2 “という状態の時を考えてみます。ここで戻るを押すと”Page2内のJavaScript更新1”に戻って欲しい訳です。しかしここはJavaScriptの更新であるため、何もしないと”Page1”に戻ってしまいます。そこでHistory APIを用いると”Page2内のJavaScript更新1” に戻ることができるようになります!

history.js

history.jsを使えば簡単にこれが実現できます。

Page2を読み込んだ時点で、history.js のstatechangeイベントをバインドしておきます。

  History.Adapter.bind(window,'statechange',function(){
    var State = History.getState();
    //ページ更新の処理(Ajax)
    pageLoad(State);
  });

// 実際の遷移
var title="次のページ";
var url = "nextPage";
History.pushState({}, title, "?" + url);

基本的にはこれだけです。これにより戻るを押されたら前のpageLoad(State)が呼び出され、”Page2内のJavaScript更新1”に戻ることができるようになります!

もちろん、ブラウザの戻るだけでなく、自分で戻るリンクを作ることもできます。その際にHistory.back();を呼ぶだけです。進むはHistory.go();です。

よりよいユーザー体験のための HTML5 の History API、ぜひ使ってみてください。

CallConnectは引き続きよりよいユーザー体験を実現するために最新技術を取り入れて改善を行ってまいります。