JavaScriptでページを遷移させる方法：location.href

通常ページ遷移を行うには、aタグで記述した文字列をクリックしてもらうことでページ遷移を行うと思います。

JavaScriptはページ遷移もコードで表現することができます。

location.hrefプロパティを使用することでそれは可能になります。

location.href

location.hrefは関数ではなくlocationオブジェクトのプロパティです。

location.hrefにURLを代入することでページ遷移を行うことができます。

以下の例はYahooのトップページに遷移するコードです。

location.href = 'http://www.yahoo.co.jp/';

同一ドメイン内であればパスを指定することで、そのドメインに属するページに遷移することができます。

このページ内のテクノロジーカテゴリの一覧ページに遷移する例が以下のコードです。

location.href = '/category/technology';

JavaScriptのコードで遷移したページは通常のaタグを用いたページ遷移と同じく、ブラウザの戻るボタンで戻ることができます。

location.hrefのもう一つの使い方

location.hrefのもう一つの使い方として、現在のページのURLを知ることができるというのがあります。

以下の例はこのページのURLを出力する例になります。

console.log(location.href); //現在のURLが出力される

このことを応用してページのURLによって実行する処理を変えるようなコードを書くことができます。