ajaxで戻るボタンを実装する

必要になったので、ajaxを使用しているページに戻るボタンを実装しました。
うまいことできたので、けっこう満足。

色々調べてみたのですが、なかなか具体的な実装例が無かった為、書き残します。
firefox2.0とIE6で検証済みです。

.htmlファイル：

ajaxにより更新されない部分に以下のHTMLソースを書いておきます。

<iframe src="ajaxframe.php" id="ajaxframe" style="border: medium none ; width: 1px; height: 1px" onload="viewAjax()"></iframe>

ちなみに呼び出している"ajaxframe.php"は真っ白なphpファイルです。
（多分htmlファイルでも問題ないです。名前もなんでもいいです。）

.jsファイル：

最低2つのファンクションが必要です。
①iframeの呼び出しファイル(src部分)を書き換えるファンクション
②iframeのonloadイベントで呼び出されるファンクション

ここでは、①にchangeFrame、②にはviewAjaxという名前を付けておきます。

これで完成です。
ロジックは以下のとおり。

ajaxによる書き換えは"changeFrame()"イベントを呼び出します。

例：
<span onclick="changeFrame('topView')">TOPへ</span>
これでクリックされるとchangeFrameファンクションがiframeのsrc部分を"ajaxframe.php?topView"に書き換えます。
↓
src部分が書き換えられた為、iframeのonloadイベントが発生し、"viewAjax()"イベントが呼び出されます。
↓
viewajaxイベントはiframeの呼び出しファイルの引き数（ここではtopView）を取得し、それにより、表示用処理を制御できるわけです。

戻るボタンを押したときはiframeのsrc部分が前回表示していた物に自動的に書き換えられ"viewAjax()"イベントが呼び出され、表示処理がされます。

次は、ajaxによって表示したページに直リンクできるようにしたいですね。

関連記事

• 関連する投稿はありません。

このブログを書いているsayjiroは最近会社を立ち上げました。小さな小さな会社ですが、一緒に働く仲間を探している今日この頃です。
社員が僕しかいない小規模零細企業ですが、自由に楽しく仕事をしつつWebを使って面白いことができればと思ってます。

募集している人物像：向上心がある・Webともの作りが好き（ある程度経験があると嬉しいですが、未経験でもやる気があれば可です）
お仕事内容：Web周り全般。サイト制作やデザイン、システム構築やiPhoneアプリ開発などいろいろです。
働く形態：その人に合わせて応相談(在宅とかでもいいです)

→興味がございましたらこちらからお気軽にご連絡ください！