JavaScriptで表示ページを移動させる方法

HTMLのリンクを使わずに、JavaScriptを使って表示ページを移動させたい場合があります。例えば、プルダウンメニューなどを使って選択項目に応じて移動先を変えたり、ボタンクリックによってページを移動させたい場合などです。

JavaScriptで表示ページを移動させるのはとても簡単で、windowオブジェクトのlocationプロパティのhrefプロパティに移動先URLを代入するだけです。例えば、以下のような1行のJavaScriptソースを書くだけです。

window.location.href = "http://www.nishishi.com/";

上記のスクリプトを実行すれば、ブラウザの表示ページが「http://www.nishishi.com/」へ移動します。代入する値は必ずしもプロトコル(http)から書く必要はありません。同一サイト内へ移動するだけなら「/」で始まる絶対パスや、「../」などを使った相対パスでも指定可能です。
例えば、ウェブサイト内のHOMEページに移動させたいなら、以下のように「/」記号1文字だけを代入すれば良いでしょう。

window.location.href = "/";

HTMLと組み合わせて、ボタンクリックで表示ページを移動するサンプルソースは以下の通りです。onclick属性値に直接JavaScriptソースを記述しています。

<input type="button" value="HOMEページへ移動" onclick="window.location = '/';" />
<input type="button" value="Googleへ移動" onclick="window.location = 'https://www.google.co.jp/';" />

上記のソースを表示すると下記のように見えます。(押すと実際に機能しますので注意して下さい。^^;)

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

JavaScriptで現在表示中のページのURLを得る方法

このlocation.hrefプロパティを参照すれば、現在の表示ページがどこかを知ることもできます。例えば、以下のようにJavaScriptを書けば、現在の表示ページ(URL)がアラートボックスに表示されます。

alert( window.location.href );

表示例は以下の通りです。

window.location.hrefを参照すると、URLのすべてが一括で得られます。しかし、JavaScriptでURLが何なのか調べたいときは、「ドメイン部分だけを知りたい」とか「パス(PATH)部分だけを知りたい」といった細かな内訳を個別に調べたい場合もあります。
そのような場合は、hrefプロパティの値を自力で分割するような必要はなく、それぞれ専用のプロパティを参照するだけで済みます。

現在URLのプロトコルがhttpかhttpsかを得る

window.location.protocolの値を参照すれば、URLのプロトコルが分かります。ページによって「http:」だったり「https:」だったりします。

alert( window.location.protocol );

http接続だったらhttpsページへ自動移動させる、などの処理を実行したい場合に使えそうです。
なお、protocolプロパティで得られる値の最後には「:」記号も含まれます。しかし「//」記号は含まれません。

現在URLのドメイン部分(ホスト名)を得る

window.location.hostnameの値を参照すれば、URLのドメイン名(ホスト名)が分かります。

alert( window.location.hostname );

ドメイン名に「www.」が含まれているかどうかをチェックしたい場合とかに使えそうです。なお、hostnameプロパティではなくhostプロパティを使うと www.nishishi.com:80 のようにポート番号が含まれてしまいます。

現在URLのパス部分を得る

window.location.pathnameの値を参照すれば、URLのパス部分(ディレクトリ名からファイル名まで)が分かります。

alert( window.location.pathname );

得られる値の先頭は、必ず「/」記号になります。
あくまでもパス(PATH)なので、URLの末尾にクエリー文字列やハッシュ文字列があっても、それらは除外して得られます。

現在URLのクエリー文字列(「?」記号に続く部分)を得る

window.location.searchの値を参照すれば、URLのクエリー文字列(「?」記号に続く部分)が分かります。「?」記号に続いて指定される文字列は、必ずしも検索用途ではありませんが、JavaScriptではsearchプロパティという名称になっています。

alert( window.location.search );

なお、このsearchプロパティで得られる文字列には、先頭の「?」記号そのものも含まれます。なので、クエリー文字列がある場合に得られる値の先頭は必ず「?」記号になります。(クエリー文字列がない場合は、何も得られません。)

現在URLのハッシュ文字列(「#」記号に続く部分)を得る

window.location.hashの値を参照すれば、URLのハッシュ文字列(「#」記号に続く部分)が分かります。ページ内リンクなどを使って移動された場合に、その場所(値)をJavaScriptで知ることができます。

alert( window.location.hash );

なお、このhashプロパティで得られる文字列には、先頭の「#」記号自体も含まれます。ただし、ハッシュ文字列がない場合は、何も得られません。

活用例：もしhttpでアクセスされていたらhttpsに切り替える

window.location.protocolの値を調べて、「http:」だったらHTTPSに切り替える処理は、例えば以下のようなJavaScriptソースで実現できます。

if( window.location.protocol == "http:" ) {
	window.location.protocol = "https:";
}

単に、URLのプロトコル名部分を「http:」から「https:」に変更しているだけです。シンプルですね。
もし、クエリー文字列やハッシュ文字列を取り除いて転送したいというような事情がある場合には、以下のようなJavaScriptソースで転送できます。

if( window.location.protocol == "http:" ) {
	window.location.href = "https://" + window.location.hostname + window.location.pathname;
}

上記のソースでは、window.location.hrefに新しいURLを代入することで表示ページを移動します。
移動先URLは、「https://」に続けて、ドメイン名(window.location.hostname)とパス名(window.location.pathname)を結合して作成しています。
この場合、元のURLにクエリー文字列(?記号)やハッシュ文字列(#記号)があっても無視されます。

もっとも、httpをhttpsに統一したいのであれば、JavaScriptを使うよりも.htaccessファイルを使った方が望ましいでしょうけどもね。(^_^;)
常時SSL化については、All Aboutで記事「SSL証明書を取得してHTTPS化する設定方法」を書きましたので、よろしければご参照下さい。

(更新日：2018年08月11日)