Location - ブラウザロケーションのオブジェクト

Locationオブジェクトとは

Locationオブジェクトを利用して、ブラウザロケーションを取得したり制御できます。ロケーションとは、現在表示しているドキュメントのWEBアドレスに関する情報です。JavaScriptを通してウェブページのURL、クエリ、プロトコルなどの情報を取得したり、任意のURLアドレスに移動させたりする場合に有用なオブジェクトです。

Locationオブジェクトの取得

Locationオブジェクトはwindow.location、またはdocument.locationに含まれています。

// Locationオブジェクトを取得
var locationObj = window.location ;
var locationObj = document.location ;

URLの各部分を取得する

例えば、下記の通り、URLの情報を参照できます。

https://syncer.jp/index.html?good=true#section-1

// 完全なURL ( → "https://syncer.jp/index.html?good=true#section-1" )
var href = locationObj.href ;

// プロトコル ( → "https:" )
var protocol = locationObj.protocol ;

// ホスト名 ( → "syncer.jp" )
var hostname = locationObj.hostname ;

// パス ( → "/index.html" )
var pathname = locationObj.pathname ;

// クエリ部分 ( → "?good=true" )
var search = locationObj.search ;

// フラグメント識別子 ( → "#section-1" )
var hash = locationObj.hash ;

URLの情報を更新する

Locationオブジェクトの特徴は、情報を参照できるだけではなく新しい値を設定して更新できることです。URLの情報が更新されるとブラウザはその情報に従って、ページを表示し直します。

// URLを変更
locationObj.href = "https://syncer.jp/new.html" ;

// クエリ部分だけを変更
locationObj.search = "good=false" ;

// フラグメント識別子だけを変更
locationObj.hash = "section-2" ;

hrefプロパティ

Locationオブジェクトのもう1つの特徴は、Locationオブジェクト自体を文字列として扱う時、Location.hrefプロパティと同じ値(完全なURL)になるということです。つまり、次の2つのコードは同じだということです。

// 完全なURLを取得 ( → "https://syncer.jp/index.html?good=true#section-1" )
var href = locationObj ;
var href = locationObj.href ;

• Location - ブラウザロケーションのオブジェクト。
• Document.location - Locationオブジェクトを取得する。

• HTML Living Standard - WHATWGによる仕様書。
• W3C勧告 - W3Cによる規格策定の最終段階。