2016/3/2更新

JavaScriptで表示中のURL情報を取得する方法：location

JavaScriptでは、現在表示しているページのURL情報を取得することができます。

URL情報は、locationオブジェクトに格納されているため、このlocationオブジェクトのプロパティとしてURL情報を取得します。

それでは、具体的にプログラムで見ていきましょう。

表示中のURL情報を取得する

var urlInfo = location.href;
alert(urlInfo );

1 2	var urlInfo = location.href; alert(urlInfo );

「http://www.test.com/test/index.html?pgid=100」というURLのページを表示した状態で、上記プログラムを実行すると、次のようになります。

image10_1

また、locationオブジェクトのURL情報にこれから表示したいページを指定すると、指定したページに移動することもできます。

location.href = 'http://test.com/test/kakunin.html?id=test';

1	location.href = 'http://test.com/test/kakunin.html?id=test';

上記の例では、「http://test.com/test/kakunin.html?id=test」というURLのページに移動します。

冒頭で、URL情報はlocationオブジェクトのプロパティと説明しましたが、他にはどんな情報をlocationオブジェクトから取得できるのか紹介します。

現在アクセスしているホストの情報をlocationオブジェクトのhostまたはhostnameプロパティから取得することができます。

var host = location.host;
alert(host);

1 2	var host = location.host; alert(host);

var hostname = location.hostname;
alert(hostname);

1 2	var hostname = location.hostname; alert(hostname);

上記二つのプログラムの実行結果は、いずれも以下のようになります。

image10_2

現在アクセスしているページのパスをlocationオブジェクトのpathプロパティから取得することができます。

var pathname = location.pathname;
alert(pathname);

1 2	var pathname = location.pathname; alert(pathname);

実行結果は、次のようになります。

image10_3

現在アクセスしているページのパラメータ情報(移動する画面に渡す情報)をlocationオブジェクトのプロパティから取得することができます。

var parameter = location.search;
alert(parameter);

1 2	var parameter = location.search; alert(parameter);

実行結果は次のようになります。

image10_4

このように、locationオブジェクトを使うと色々なページ情報を取得したり、locationオブジェクトのプロパティに任意の値を設定することで、ページを移動したりページに値を引き渡したりすることが可能になります。

JavaScript