Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

ページを移動させる

JavaScriptを使って表示ページを移動させることができます。プルダウンメニューなどを使って、選択項目に応じて移動先を変えたり、ボタンクリックによってページを移動させる際などに活用できます。
JavaScriptでページを移動させるには、documentオブジェクトのlocationプロパティに移動先URLを代入します。例えば、以下のようなソースで。

document.location = "http://www.nishishi.com/";

上記のスクリプトを実行すれば、ブラウザの表示ページが「http://www.nishishi.com/」へ移動します。
このlocationプロパティを参照すれば、現在の表示ページがどこかを知ることもできます。例えば、以下のようにJavaScriptを書けば、現在の表示ページ(URL)がアラートボックスに表示されます。

alert( document.location );

※アラートボックスの中だからといって「document.location」を引用符で囲まないように注意しましょう。引用符で囲んでしまうと、「document.location」という文字列そのものをそのまま表示してしまいます。

HTMLと組み合わせて、ボタンクリックでURLを表示したりページを移動したりするサンプルは、以下の通り。

上記の各ボタンをクリックすると、それぞれ、URLを表示したりページを移動したりします。これを実現するHTMLソースとJavaScriptソースは以下の通り。

<form>
<input type="button" value="現在のURLを表示" onclick="alert( document.location );" />
<input type="button" value="HOMEページへ移動" onclick="document.location = 'http://www.nishishi.com/';" />
</form>

なお、プルダウンメニューとJavaScriptを使って、選択項目に応じてページを移動させる方法については、過去にAll Aboutで記事にしていますので、そちらもぜひ参照してみて下さい。→「極短JavaScriptでプルダウンメニューを作る

ちなみに、現在のURLを参照するだけなら、document.locationの他に、document.URLも使えます。URLプロパティは参照のみで代入はできません。まあ、常にlocationプロパティを使っておけば良いでしょう。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど