にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

ページを移動させたり、現在URLを構成部分別に得る方法 [操作・移動]

JavaScriptを使って表示ページを移動させるには、window.location.hrefに移動先URLを代入するだけです。とても簡単です。このhrefプロパティを参照すれば現在のURLを得ることもできます。hostnameプロパティやpathnameプロパティなどを使えば、URLのうちドメイン部分(ホスト名部分)だけやパス部分だけなど構成部分別に得ることも可能です。

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の末尾にクエリー文字列やハッシュ文字列があっても、それらは除外して得られます。

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ソースで実現できます。

JavaScriptソース

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

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

もっとも、httpをhttpsに統一したいのであれば、JavaScriptを使うよりも.htaccessファイルを使った方が望ましいでしょうけどもね。(^_^;)

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---