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

戻る-ajax- - (2007/05/02 (水) 11:30:15) のソース

<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>