堀北真希うさぎ
主な作品
堀北真希うさぎ：昔のボシュロムのコンタクト『オプティマ』CMを真似てレンズを入れている場面を含んだ仮想CM動画

ページ案内▼

前頁に戻るリンクを作る。

HTMLでは<a>要素のhref属性で指定されているアドレスにしか戻る事は出来ませんが、JAVAスクリプトを用いれば、どんなページからやってきても元のページに戻れるというリンクが作れます。

前頁に戻るリンクを作る・目次。

前頁に戻るリンクのサンプル。

スクリプトを実行できる環境なら、以下に直前のページに戻るリンクが表示される筈です。対応していない環境では、このコーナの目次へのリンクとして機能します。

前頁に戻るリンクを作るスクリプトのソース。(平成17年 9月14日 修正)

この機能を実現するには、戻る為の<a>要素に以下の属性を埋込みます。

 … <a href="スクリプトが実行できない場合のリンク先URL" onclick="history.back();return(false);" onkeypress="if (event.keyCode!=10) return(true); else { history.back();return(false); }">戻る</a> …

スクリプトの処理の流れ。

onclick属性は、当該要素をクリックした場合に指定されたスクリプトを実行させる為の属性です。

一方、onkeypress属性は当該要素にフォーカスがある場合にキーを押す事で実行させたいスクリプトを指定する属性です。本来、キーボードのみでアクセスしている環境も想定してonkeypress属性も指定し、キーボード入力で同じ処理をするようにすることが求められています。

しかしながら、実際には当該アンカーにフォーカスがある場合にはENTERキーなどの押下がマウスによるリンク指定と同じ働きをするため、onkeypress属性は不要です。それどころかonkeypress属性を指定すると、TABキーなどでカーソルを移動しようとしてもonkeypress属性の処理が優先されてカーソル移動が出来なくなると言う弊害もあります。このため、onkeypress属性では何もしないで「return(true)」を実行させます。(平成17年 9月14日 削除)

しかしながら、一部ブラウザにはonkeypress属性がカーソル移動のためのTABキーまで拾ってしまうと言う欠陥があり、この場合カーソル移動のつもりでTABキーを押しても、onkeypress属性で指定された処理が実行されてしまう、すなわちカーソル移動が出来なくなると言う問題があります。このため、onkeypressでは、押下されたキーを調べてENTERキーの場合のみ必要な処理を実行させると言う段取りが必要になります。(平成17年 9月14日 追加)

onclick属性での処理。

さて、onclick属性で指定されている「history.back()」は直前にアクセスしたページに戻ると言うものです。ブラウザの「戻る」ボタンを指定して前に表示したページに戻る動作を実現します。

onclick属性は、本来の<a>要素の機能処理より先にスクリプトを実行しますが、正規の<a>要素の処理はスクリプトと無関係に行われます。つまり、以下のような処理の流れになってしまいます。

  1. onclick属性で指定されたスクリプトを実行する。今回の場合は「history.back()」メソッドで直前に見ていたページに戻る。
  2. その後、本来の<a>要素の処理である、href属性で指定されたリソースの読込を行い、表示させる。
  3. 結局、href属性で指定されたリソースを表示することとなり、onclick属性で実行させた「history.back()」は無意味だった。

この対策として、onclick属性で実行させるスクリプトでは、最後に「return(false);」を実行させます。こうする事でスクリプト実行終了後に実行されるべき正規の<a>要素の処理を中断させることが出来ます。

onkeypress属性での処理。(平成17年 9月14日 追記)

一方、onkeypress属性で実行させるべき処理では、上述の通りENTERキー以外の入力を弾く必要があります。

event.keyCodeプロパティはonkeypress属性などで指定された処理が実行される際に拾った押下キーコードを与えます。

ENTERキーのキーコードは「10」ですので、これ以外の値なら、実行させないだけでなく、押下されたキー本来の処理を続けて貰います。

これには「return(true);」を実行させます。

一方、ENTERキーを押された場合は、これ以外の場合に限ってhistory.back()を実行する事になります。

実行された場合は、マウスの場合と同じ理由から「return(false);」を実行します。

纏めると、以下のようになります。

  1. もし押下されたキーがENTERキー以外なら
    1. return(true);で押下キー本来の処理を続けさせる。

    そうでないなら(＝押されたキーがENTERキーなら)

    1. history.back()で前頁に戻る。
    2. return(false);でリンク指定処理を中断させる。

余談。

実は<a>要素のhref属性値にスクリプトを記述する事も不可能ではありませんが、そうするとJAVAスクリプトが実行出来ない状況ではアンカーとしての意味が無くなってしまいます。

これはJAVAスクリプトを利用出来ないユーザに不便なので、href属性値には取敢えず前のページに相当するものを指定して、JAVAスクリプトはonclickで起動するようにしましょう。

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com