JavaScript プログラミング講座

 

ロケーションについて(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 を指定して、ページを遷移するには、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() メソッドを使用します。
 
このメソッドを使用すると、元のページに戻ることはできません。
 
今まで開いていたページのセッション履歴(1回分)が、移動先のアドレスで上書きされ、消滅します。
 
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/");
};