ブラウザの「戻る」ボタン ...

2010年 2月 16日

ブラウザの「戻る」ボタン

フォームに記入しているときに、誤ってブラウザの戻るボタンを押してしまったらどうでしょうか？すべて入力しなおしになります。

では、どうしたらいいでしょうか？ページ遷移するときに以下のコマンドでそれを補足することができます。
  0
  1
window.onunload = function(){
 （フォームの内容をクッキーに保存する処理。）
}
たとえば、アラートで（クッキーに一時保存しますか？）のようなダイアログを出して次回からはそれから読み込むようにするといった使い方ができます。

しかし、ajaxで動的にページを書き換えていたり、する場合もう少し動作はややこしくなります。「戻る」ボタンを押してしまうとページそのものが初期化されてしまうからです。

▲ ▼
ブラウザの「戻る」ボタンのハッキング

そこで、dojoのdojo.backというAPIを用いてブラウザの「戻る」ボタンを（正確には「進む」ボタンも）ハッキングしてしまうという方法があります。

http://download.dojotoolkit.org/current-stable/dojo-release-1.2.0/dojo/tests/back.html

ここの例では、左側のボタンをクリックすると右側のdata outputにそれが反映されていくというサンプルです。ボタンを押した順にブラウザの「進む」と「戻る」ボタンを押すとそれが左側に反映されることを確認ください。

実際のサンプルとして、楽天トラベルのAPIを用いて非同期検索するときに、dojo.backを用いて戻るをクリックしたときに、前の検索結果を表示するというものです。

http://plaza.rakuten.co.jp/gontata/diary/20080508/

▲ ▼
サンプルコード

ページのヘッダーに以下を追加
dojo.require("dojo.back");
bodyタグの最後に以下を追加
  0
  1
  2
 <script type="text/javascript"><![CDATA[<!--
  dojo.back.init();
 </script>
「進む」ボタンと「戻る」ボタンを押したときに、状態の保存したいフォームの定義の処理
  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 function init(){
  // 初期設定
  ApplicationState = function(ch1,ch2,ch3){
   this.changeUrl = false;
   this.form1 = form1;
   this.form2 = form2;
   this.form3 = form3;
  };
 
  dojo.extend(ApplicationState, {
   // 「戻る」ボタンをハッキング
   back: function(){
    dojo.byId('form1').value = this.form1;
    dojo.byId('form2').value = this.form2;
    dojo.byId('form3').value = this.form3;
   },
   // 「進む」ボタンをハッキング
   forward: function(){
    dojo.byId('form1').value = this.form1;
    dojo.byId('form2').value = this.form2;
    dojo.byId('form3').value = this.form3;
   }
  });
  dojo.back.setInitialState();
 }
 dojo.addOnLoad(init); // オンロード時に実行
フォームが変更されたときにdojo.backに状態を保存する
  0
  1
  2
 function saveBack(){
  var appState = new ApplicationState(dojo.byId('form1').value, dojo.byId('form2').value, dojo.byId('form3').value);
  dojo.back.addToHistory(appState);
 }
あとは、
  0
  1
 <input type="text" value="" onchange="saveBack();" name="form1" id="form1" />
 <input type="textarea" value="1" onchange="saveBack();" name="form1" id="form1" /></textarea>
のような形で、フォームの内容に変更があったときにsaveBack()が呼び出されるようにし、dojo.backに状態を保存します。