Step.58 - アイコンボタンで前のページに戻る(フレーム版)

左フレームにリンクボタン、右フレームにリンク先を表示するのは、フレームの定番。
左フレームの戻るボタンを押すと、右フレームのページが１つ戻るようにしてみましょう。

Step テーマ
● top.[Frame].history.go(-1) - 履歴を戻す(フレーム版)

実行例

下の左右フレームが実行例です。

【リスト】設定フレーム

【リスト】左フレーム

<a href="index.htm" target="myRight">イヌでもわかるJavaScript講座目次</a> 
<a href="hajimeni.htm" target="myRight">はじめに</a> 
<a href="step1.htm" target="myRight">Step.1 いきなりJavaScriptを使ってみましょう</a> 
<a href="aisatu.htm" target="myRight">Step.2 あいさつ文を表示してみましょう</a> 
<a href="getdate.htm" target="myRight">Step.3 現在の日付と時間を表示してみましょう</a> 
<a href="javascript:top.myRight.history.go(-1)"><img src="BACK4.gif" alt="１つ前に戻ります" border="0" width="76" height="49"></a>

サンプルだけの HTMLはこちらへ

説明

Step.7 で、履歴移動の説明をしました。ひとつ前にもどるには、history.back() か、history.go(-1) を使います。

これを応用して、Step.36 で、アイコンボタンで使えるようにしました。
<a href="javascript:history.go(-1)">戻る</a>

これをさらに応用して、フレーム操作できるようにします。
<a href="top.myRight.javascript:history.go(-1)">戻る</a>

やってることは、Step.55 と同じことです。

参考ステップ
Step.7 履歴移動ボタンをつくってみましょう　※ history.go(-1)
Step.36 アイコンボタンでリンク元に戻りましょう　※ history.go(-1)
Step.55 プルダウンメニューを使って目次を作りましょう（フレーム版）

サンプルの画像

BACK4.gif

▲TOP