ページを移動する色々な方法

いつものHyper Linkをクリックしたり、FORMのsubmitボタンを 押す以外の方法でページを移動することができます。

Radioボタンを選択すると直ちにページを移動する仕組み

スクリプトソース

<FORM>
<INPUT TYPE=RADIO NAME="sectionA" onClick="window.location = '../whatscgi.html'"> Section 1 
<INPUT TYPE=RADIO NAME="sectionA" onClick="window.location = '../showtime.html'"> Section 2 
<INPUT TYPE=RADIO NAME="sectionA" onClick="window.location = '../download.html'"> Section 3 
<INPUT TYPE=RADIO NAME="sectionA" onClick="window.location = '../ssimgmap.html'"> Section 4 
</FORM>

スクリプト実行結果

Section 1 Section 2 Section 3 Section 4

Browserのwindowを管理するwindow objectの下で 表示ページのlocationを管理するlocationオブジェクトに対して このようにURLを代入すると直ちにそのページへ移動します。

Pull down menuを選択すると直ちにページを移動する仕組み

スクリプトソース

<FORM>
<SELECT NAME="section" onChange="window.location = this.options[this.selectedIndex].value">
<OPTION VALUE="../whatscgi.html"> Section 1
<OPTION VALUE="../showtime.html"> Section 2
<OPTION VALUE="../download.html"> Section 3
<OPTION VALUE="../ssimgmap.html"> Section 4
</SELECT>
</FORM>

スクリプト実行結果

Section 1 Section 2 Section 3 Section 4

選択されているSELECTが変更されるとonChangeで指定した作業が 実行されます。SELECTタグ内での this はこのselect object自体を 意味します。options[]配列はOPTIONタグを管理するobjectの配列です。 selectedIndexは選択されたOPTIONタグの番号(0から数え始める)です。

<A HREF="#subparagraph">のようにページ内移動をJavaScript で行うには

window.location.hash = 'subparagraph'

<A HREF でもJavaScriptの作業を行わせることができます。

<A HREF="javascript:history.go(-1)"> Back  </A>