戻る・進む(Ajax)


概要
  1. location.hashへ状態を再現できる値を追加して、処理毎に値を変更。
  2. タイマーでその値の変化を監視して、変化時に状態を再現できる処理を実行
  3. location.hashへ処理に伴う値の変化を格納
共通部

格納する値の作成(":"で各値を分割)

var tempHash;

tempHash = encodeURIComponent(値1) + ":";
tempHash = tempHash + encodeURIComponent(値2) + ":";
.
.
.
tempHash = encodeURIComponent(値ラスト);

location.hashより取得した値の分割

var locationhash = ブラウザオブジェクトより値を取得;

var hash = locationhash.replace("#","");
var hashArray = decodeURIComponent(hash).split(":");

IE(iframeを利用)

iframeを使う理由

  • 通常のlocation.hashの変更ではサーバーに値が残らない。iframe内のsrcの変更を利用する必要がある。
  • その場合、open、closeメソッドを呼ばないと値が残らない。

dom操作によるiframeの動的生成

function appendIframe(){

//動的にiframeを生成。
var ifr = document.createElement('IFRAME');
ifr.style.cssText = "display:none;";

document.body.appendChild(ifr);

}

iframeの取得

function getIframe(){

//iframeを一つしか使っていないことを想定
//iframeのgetElementByIdがIEで上手く行かない?
var iframe = frames[frames.length - 1].document;
return iframe;

}

iframeのlocation.hashの取得

function getIframeLocationHash(){

var iframe = getIframe();
return iframe.location.hash;

}

location.hashの変更

function changeIframeLocationHash(value){

var iframe = getIframe();
iframe.open();
iframe.close();

iframe.location.hash = value;

}

Firefox(location.hashを利用)

location.hashの変更

location.hash = 変更後の値

check時

比較用の変数lhashAfterを用意して、各処理後にそれにも値を格納するようにする。

    ※注意※ その場合、"#"も値内に入っている。

チェック時にはまず、

  1. lhashAfterとlocation.hashの変化を比較
  2. hash内の各値を必要に応じて比較

 

最終更新:2007年05月02日 11:36