JavaScript プログラミング講座


ロケーションについて（Location）



・ロケーションについて
・ロケーションのプロパティについて
・現在のページの URL を取得する
・現在のページをリロードする
・URL を指定してページを遷移する

前のページに戻る

　

ロケーションについて（Location）

　


■ロケーションについて

　
ロケーションは、URL アドレスに関する情報がまとまっています。
　
■ Location オブジェクトを取得する
　
Location オブジェクトを取得するには、window.location プロパティを使用します。
　
ロケーションオブジェクトを取得する

// ロケーションオブジェクトを取得する
var location_obj = window.location;

// 出力テスト
console.log(location_obj);
　

上に戻る

　

ロケーションのプロパティについて

　
　


■ロケーションのプロパティ一覧

　
Location インターフェースで利用可能な、プロパティの一覧です。
　
プロパティ名型説明
hrefStringページの URL アドレスを設定する
protocolString「現在のページの URL」から「プロトコル」を取得する。
hostString「現在のページの URL」から「ホスト名」 + 「ポート番号」を取得する。
hostnameString「現在のページの URL」から「ホスト名」を取得する。
portString「現在のページの URL」から「ポート番号」を取得する。
pathnameString「現在のページの URL」から「パス名」を取得する
searchString「現在のページの URL」から「クエリ」を取得する。
hashString「現在のページの URL」から「フラグメント識別子」を取得する。
　
ロケーションオブジェクト内の情報をすべて取得する

// ロケーションオブジェクトを取得する
var location_obj = window.location;

// 出力テスト
console.log("href:" + location_obj.href);
console.log("protocol:" + location_obj.protocol);
console.log("host:" + location_obj.host);
console.log("hostname:" + location_obj.hostname);
console.log("port:" + location_obj.port);
console.log("pathname:" + location_obj.pathname);
console.log("search:" + location_obj.search);
console.log("hash:" + location_obj.hash);
　

■「現在のページの URL」から「プロトコル」を取得する

　
「現在のページの URL」から「プロトコル」を取得するには、location.protocol プロパティを使用します。
　
「プロトコル」に該当する部分

http://sub.example.com:8080/aaa/bbb/ccc.html?name=taro&age=18#FRAGMENT_IDENTIFIER
　

■「現在のページの URL」から「ホスト名」 + 「ポート番号」を取得する

　
「現在のページの URL」から「ホスト名」 + 「ポート番号」を取得するには、location.host プロパティを使用します。
　
「現在のページの URL」に「ポート番号」が存在しない場合、空文字列が得られます。
　
「ホスト名」 + 「ポート番号」に該当する部分

http://sub.example.com:8080/aaa/bbb/ccc.html?name=taro&age=18#FRAGMENT_IDENTIFIER
　

■「現在のページの URL」から「ホスト名」を取得する

　
「現在のページの URL」から「ホスト名」を取得するには、location.hostname プロパティを使用します。
　
「ホスト名」に該当する部分

http://sub.example.com:8080/aaa/bbb/ccc.html?name=taro&age=18#FRAGMENT_IDENTIFIER
　

■「現在のページの URL」から「ポート番号」を取得する

　
「現在のページの URL」から「ポート番号」を取得するには、location.port プロパティを使用します。
　
「現在のページの URL」に「ポート番号」が存在しない場合、空文字列が得られます。
　
「ポート番号」に該当する部分

http://sub.example.com:8080/aaa/bbb/ccc.html?name=taro&age=18#FRAGMENT_IDENTIFIER
　

■「現在のページの URL」から「パス名」を取得する

　
「現在のページの URL」から「パス名」を取得するには、location.pathname プロパティを使用します。
　
「パス名」に該当する部分

http://sub.example.com:8080/aaa/bbb/ccc.html?name=taro&age=18#FRAGMENT_IDENTIFIER
　

■「現在のページの URL」から「クエリ」を取得する

　
「現在のページの URL」から「クエリ」を取得するには、location.search プロパティを使用します。
　
「現在のページの URL」に「クエリ」が存在しない場合、空文字列が得られます。
　
「クエリ」に該当する部分

http://sub.example.com:8080/aaa/bbb/ccc.html?name=taro&age=18#FRAGMENT_IDENTIFIER
　

■「現在のページの URL」から「フラグメント識別子」を取得する

　
「現在のページの URL」から「フラグメント識別子」を取得するには、location.hash プロパティを使用します。
　
「現在のページの URL」に「フラグメント識別子」が存在しない場合、空文字列が得られます。
　
「フラグメント識別子」に該当する部分

http://sub.example.com:8080/aaa/bbb/ccc.html?name=taro&age=18#FRAGMENT_IDENTIFIER
　

上に戻る

　

現在のページの URL を取得する

　


■現在のページの URL を取得する

　
現在のページの URL を取得するには、location.href プロパティを使用します。
　
ロケーションのプロパティを使用すると、「現在のページの URL 文字列」を解析する事ができます。
　
ロケーションのプロパティについては、こちらで解説しています。
　
現在のページの URL を取得する

// ロケーションオブジェクトを取得する
var location_obj = window.location;

// 出力テスト
console.log("href:" + location_obj.href);
　

上に戻る

　

現在のページをリロードする

　


■現在のページをリロードする

　
現在のページをリロードするには、reload() メソッドを使用します。
　
Location.reload( 強制取得を試みるか？ ) :Void
第01引数(略可)Booleantrue の場合、サーバーから読み込みを試みる。
false の場合、キャッシュから読み込みを試みる。（デフォルトは false）
戻り値 Voidなし
　
マウスボタンをクリックすると、ページをリロードする

// ------------------------------------------------------------
// マウスボタンをクリックすると実行されるイベント
// ------------------------------------------------------------
document.onclick = function (e){
	if(!e) e = window.event; // レガシー

	// ------------------------------------------------------------
	// ロケーションオブジェクトを取得する
	// ------------------------------------------------------------
	var location_obj = window.location;

	// ------------------------------------------------------------
	// 現在のページのリロードを開始する
	// ------------------------------------------------------------
	location_obj.reload();
};
　

上に戻る

　

URL を指定してページを遷移する

　
■URL を指定して、ページを遷移する
■URL を指定して、ページを遷移する（現在のセッション履歴を上書きする）
　


■URL を指定して、ページを遷移する

　
URL を指定して、ページを遷移するには、assign() メソッドを使用します。
　
Location.assign( "URL" ) :Void
第01引数 String移動したい URL アドレスを指定
戻り値 Voidなし
　
マウスボタンをクリックすると、google.com へ移動する

// ------------------------------------------------------------
// マウスボタンをクリックすると実行されるイベント
// ------------------------------------------------------------
document.onclick = function (e){
	if(!e) e = window.event; // レガシー

	// ------------------------------------------------------------
	// ロケーションオブジェクトを取得する
	// ------------------------------------------------------------
	var location_obj = window.location;

	// ------------------------------------------------------------
	// google.com へ移動する
	// ------------------------------------------------------------
	location_obj.assign("http://google.com/");
};
　
■ location.href プロパティを使用する
　
location.href プロパティに URL をセットして、ページを遷移することもできます。
　
マウスボタンをクリックすると、google.com へ移動する

// ------------------------------------------------------------
// マウスボタンをクリックすると実行されるイベント
// ------------------------------------------------------------
document.onclick = function (e){
	if(!e) e = window.event; // レガシー

	// ------------------------------------------------------------
	// ロケーションオブジェクトを取得する
	// ------------------------------------------------------------
	var location_obj = window.location;

	// ------------------------------------------------------------
	// google.com へ移動する
	// ------------------------------------------------------------
	location_obj.href = "http://google.com/";
};
　

■URL を指定して、ページを遷移する（現在のセッション履歴を上書きする）

　
URL を指定して、ページを遷移するには、replace() メソッドを使用します。
　
このメソッドを使用すると、元のページに戻ることはできません。
　
今まで開いていたページのセッション履歴（１回分）が、移動先のアドレスで上書きされ、消滅します。
　
Location.replace( "URL" ) :Void
第01引数 String移動したい URL アドレスを指定
戻り値 Voidなし
　
マウスボタンをクリックすると、google.com へ移動する

// ------------------------------------------------------------
// マウスボタンをクリックすると実行されるイベント
// ------------------------------------------------------------
document.onclick = function (e){
	if(!e) e = window.event; // レガシー

	// ------------------------------------------------------------
	// ロケーションオブジェクトを取得する
	// ------------------------------------------------------------
	var location_obj = window.location;

	// ------------------------------------------------------------
	// google.com へ移動する（現在のセッション履歴を上書きする）
	// ------------------------------------------------------------
	location_obj.replace("http://google.com/");
};
　

上に戻る

　
前のページに戻る