「戻る-ajax-」の編集履歴（バックアップ）一覧はこちら

「戻る-ajax-」(2007/05/02 (水) 11:36:10) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

<h3>戻る・進む(Ajax)</h3>
<hr width="100%" size="2" />
<h5>概要</h5>
<ol>
    <li>location.hashへ状態を再現できる値を追加して、処理毎に値を変更。</li>
    <li>タイマーでその値の変化を監視して、変化時に状態を再現できる処理を実行</li>
    <li>location.hashへ処理に伴う値の変化を格納</li>
</ol>
<h5>共通部</h5>
<p>格納する値の作成（"："で各値を分割）</p>
<pre>var tempHash;<br />             <br />tempHash = encodeURIComponent(値１) + ":";<br />tempHash = tempHash + encodeURIComponent(値２) + ":";<br />.<br />.<br />.<br />tempHash = encodeURIComponent(値ラスト);</pre>
<div>
<p>location.hashより取得した値の分割</p>
<pre>var locationhash = ブラウザオブジェクトより値を取得;<br /><br />var hash = locationhash.replace("#","");<br />var hashArray = decodeURIComponent(hash).split(":");</pre>
</div>
<hr width="100%" size="2" />
<h5>IE(iframeを利用)</h5>
<p>iframeを使う理由</p>
<ul>
    <li>通常のlocation.hashの変更ではサーバーに値が残らない。iframe内のsrcの変更を利用する必要がある。</li>
    <li>その場合、open、closeメソッドを呼ばないと値が残らない。</li>
</ul>
<p>dom操作によるiframeの動的生成</p>
<pre>function appendIframe(){<br />  <br />  //動的にiframeを生成。<br />     var ifr = document.createElement('IFRAME');<br />       ifr.style.cssText = "display:none;";<br />   <br />  document.body.appendChild(ifr);<br /><br />}</pre>
<div>
<p>iframeの取得</p>
<pre>function getIframe(){<br />     <br />  //iframeを一つしか使っていないことを想定<br />  //iframeのgetElementByIdがIEで上手く行かない?<br />   var iframe = frames[frames.length - 1].document;<br />  return iframe;<br /> <br />}</pre>
<div>
<p>iframeのlocation.hashの取得</p>
<pre>function getIframeLocationHash(){<br /> <br />  var iframe = getIframe();<br /> return iframe.location.hash;<br />   <br />}</pre>
<div>
<p>location.hashの変更</p>
<pre>function changeIframeLocationHash(value){<br /> <br />  var iframe = getIframe();<br /> iframe.open();<br />    iframe.close();<br /><br />  iframe.location.hash = value;<br />  <br />}</pre>
</div>
</div>
</div>
<hr width="100%" size="2" />
<h5>Firefox(location.hashを利用)</h5>
<p>location.hashの変更</p>
<pre>location.hash =　変更後の値</pre>

<h3>戻る・進む(Ajax)</h3>
<hr width="100%" size="2" />
<h5>概要</h5>
<ol>
    <li>location.hashへ状態を再現できる値を追加して、処理毎に値を変更。</li>
    <li>タイマーでその値の変化を監視して、変化時に状態を再現できる処理を実行</li>
    <li>location.hashへ処理に伴う値の変化を格納</li>
</ol>
<h5>共通部</h5>
<p>格納する値の作成（"："で各値を分割）</p>
<pre>var tempHash;<br />            <br />tempHash = encodeURIComponent(値１) + ":";<br />tempHash = tempHash + encodeURIComponent(値２) + ":";<br />.<br />.<br />.<br />tempHash = encodeURIComponent(値ラスト);</pre>
<div>
<p>location.hashより取得した値の分割</p>
<pre>var locationhash = ブラウザオブジェクトより値を取得;<br /><br />var hash = locationhash.replace("#","");<br />var hashArray = decodeURIComponent(hash).split(":");</pre>
</div>
<hr width="100%" size="2" />
<h5>IE(iframeを利用)</h5>
<p>iframeを使う理由</p>
<ul>
    <li>通常のlocation.hashの変更ではサーバーに値が残らない。iframe内のsrcの変更を利用する必要がある。</li>
    <li>その場合、open、closeメソッドを呼ばないと値が残らない。</li>
</ul>
<p>dom操作によるiframeの動的生成</p>
<pre>function appendIframe(){<br /> <br />  //動的にiframeを生成。<br />     var ifr = document.createElement('IFRAME');<br />       ifr.style.cssText = "display:none;";<br />  <br />  document.body.appendChild(ifr);<br /><br />}</pre>
<div>
<p>iframeの取得</p>
<pre>function getIframe(){<br />    <br />  //iframeを一つしか使っていないことを想定<br />  //iframeのgetElementByIdがIEで上手く行かない?<br />   var iframe = frames[frames.length - 1].document;<br />  return iframe;<br /><br />}</pre>
<div>
<p>iframeのlocation.hashの取得</p>
<pre>function getIframeLocationHash(){<br /><br />  var iframe = getIframe();<br /> return iframe.location.hash;<br />  <br />}</pre>
<div>
<p>location.hashの変更</p>
<pre>function changeIframeLocationHash(value){<br /><br />  var iframe = getIframe();<br /> iframe.open();<br />    iframe.close();<br /><br />  iframe.location.hash = value;<br /> <br />}</pre>
</div>
</div>
</div>
<hr width="100%" size="2" />
<h5>Firefox(location.hashを利用)</h5>
<p>location.hashの変更</p>
<pre>location.hash =　変更後の値</pre>
<hr width="100%" size="2" />
<h5>check時</h5>
<p>比較用の変数lhashAfterを用意して、各処理後にそれにも値を格納するようにする。</p>
<p>&#160;&#160;&#160; ※注意※　その場合、"＃"も値内に入っている。</p>
<p>チェック時にはまず、</p>
<ol>
    <li>lhashAfterとlocation.hashの変化を比較</li>
    <li>hash内の各値を必要に応じて比較</li>
</ol>
<p>&#160;</p>