SYNCERのロゴ
アイキャッチ画像

Location - ロケーション

Locationは、ロケーションの情報を調べたり、操作するための機能を備えたインターフェイスです。

概要

名前
Location
IDL
[Exposed=Window]
interface Location { // but see also additional creation steps and overridden internal methods
  [Unforgeable] stringifier attribute USVString href;
  [Unforgeable] readonly attribute USVString origin;
  [Unforgeable] attribute USVString protocol;
  [Unforgeable] attribute USVString host;
  [Unforgeable] attribute USVString hostname;
  [Unforgeable] attribute USVString port;
  [Unforgeable] attribute USVString pathname;
  [Unforgeable] attribute USVString search;
  [Unforgeable] attribute USVString hash;

  [Unforgeable] void assign(USVString url);
  [Unforgeable] void replace(USVString url);
  [Unforgeable] void reload();

  [Unforgeable, SameObject] readonly attribute DOMStringList ancestorOrigins;
};
仕様書
https://html.spec.whatwg.org/multipage/history.html#location

チュートリアル

LocationはWindow.locationDocument.locationから取得できます。

window.location ;
document.location ;
location ;	// windowは省略できるので、locationでそのまま使える

各情報を調べることができます。

// https://syncer.jp/index.html?page=100#hoge

location.href ;	// 完全なアドレス ("https://syncer.jp/index.html?page=100#hoge")
location.pathname ;	// パス ("/index.html")
location.hash ;	// ハッシュ ("#hoge")
location.search ;	// クエリ ("?page=100")
location.protocol ;	// プロトコル ("https:")
location.hostname ;	// ホスト ("syncer.jp")

Location.hrefにはstringifier属性があります。Locationを文字列として取り扱う時、Location.hrefと同じ値になります。下記は同じ出力となります。

element.textContent = location.href ;
element.textContent = location ;

値を代入する時も同様です。

location.href = "https://syncer.jp/" ;	// "https://syncer.jp/"に遷移
location = "https://syncer.jp/" ;	// "https://syncer.jp/"に遷移

コンストラクタ

コンストラクタはありません。

プロパティ

ancestorOrigins

ロケーションの全ての祖先オリジンを含むDOMStringListを返します。

hash

ロケーションのハッシュを返します。

host

ロケーションのホスト名とポート番号を返します。

hostname

ロケーションのホスト名を返します。

href

ロケーションの完全なアドレスを返します。

origin

ロケーションのオリジンを返します。

pathname

ロケーションのパス名を返します。

port

ロケーションのポート番号を返します。

protocol

ロケーションのプロトコルを返します。

ロケーションのクエリを返します。

メソッド

assign()

新しいロケーションに遷移させます。hrefに値を代入するのと同じです。

reload()

現在のロケーションを再読み込みします。

replace()

新しいロケーションに遷移させます。ただし、履歴エントリーは追加されずに、現在の履歴エントリーと置き換わります。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
Location
ancestorOrigins 20+× 6.0+×× 15+ 6.0+ 4.4+
assign()
hash
host
hostname
href
origin 21+ 5.1+ 11+ 15+ 4.0+
pathname
port
protocol
reload()
replace()
search
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月7日 (土)
コンテンツを公開しました。