URL インターフェイスは、URL オブジェクトを生成するための静的なメソッドを提供するオブジェクトを表します。

まだコンストラクターを実装していないユーザーエージェントで使用する場合、Window.URL プロパティ (Webkit ベースのブラウザーでは、接頭辞付きの Window.webkitURL) などのオブジェクトを使用してアクセスできます。

註: この機能は Web Workers 内で利用可能です。

URL は、URL をパース、構築、normalise、エンコードするために使われます。

コンストラクターは url 引数と、任意で url に渡されたものが相対パスだった時のための base 引数を受け取ります。

const url = new URL('../cats', 'http://www.example.com/dogs');
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"

URL を構築するために URL プロパティを設定できます

url.hash = 'tabby';
console.log(url.href); // "http://www.example.com/cats#tabby"

URL は RFC 3986 にもとづいてエンコードされます

url.pathname = 'ありきたり.html';
console.log(url.href); // "http://www.example.com/%E3%81%82%E3%82%8A%E3%81%8D%E3%81%9F%E3%82%8A.html"

URL のクエリー文字列を構築および操作するために、URLSearchParams インターフェイスを使用できます。

現在のウィンドウの URL からパラメーターの検索結果を入手するには

// https://www.example.com/?id=123
var parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // 123

URLtoString メソッドは href プロパティでもあるため、URL を直接ノーマライズやエンコードするためにコンストラクターを使用できます。

const response = await fetch(new URL('http://www.example.com/démonstration.html'));

コンストラクター

URL()
与えられた引数で構成される URL オブジェクトを返す。

プロパティ

URL.hash
'#' に続く URL のフラグメント識別子を含む DOMString
URL.host
URL のホスト名':'ポートで構成されるホストを含む DOMString
URL.hostname
URL のドメインを含む DOMString
URL.href
URL 全体を含む DOMString
URL.origin 読取専用
URL のオリジン、つまりそのスキーマ、ドメイン、およびポートを含む DOMString を返す。
URL.password
ドメイン名の前に指定されたパスワードを含む DOMString
URL.pathname
最初の '/' に続く URL のパスを含む DOMString
URL.port
URL のポート番号を含む DOMString
URL.protocol
最後の ':' までを含めた URL のプロトコルスキーマを含む DOMString
URL.search
'?' に続く URL のパラメーターを含む DOMString
URL.searchParams 読取専用
URL に含まれる GET クエリー引数にアクセスすることができる URLSearchParams を返す。
URL.username
ドメイン名の前に指定されたユーザー名を含む DOMString

メソッド

URL インターフェイスは、URLUtils で定義されているメソッドを実装しています。

URLUtils.toString()
URL 全体を含む DOMString を返す。これは URLUtils.href と同義だが、値の変更には使用できない。
URL.toJSON() [Firefox v54から有効]
URL 全体を含む DOMString を返す。href プロパティと同じ文字列が返される。

静的なメソッド

URL.createObjectURL()
一意の blob URL、つまり、そのスキームとして blob:、続いてブラウザー内のオブジェクトを一意に識別する不透明な文字列を持つ URL を含む DOMString
URL.revokeObjectURL()
URL.createObjectURL() を使用して以前に生成したオブジェクト URL を取り消す。

仕様

仕様 ステータス コメント
File API
URL の定義
草案 静的なメソッドの URL.createObjectURL()URL.revokeObjectURL() の追加。
URL
Node の定義
現行の標準 初期定義 (URLUtils を実装)。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 32
完全対応 32
完全対応 2
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 19
補足
完全対応 19
補足
補足 Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683). This has been fixed as of Firefox 57.
補足 To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']);.
未対応 4 — 18
補足
補足 This interface was supported with the non-standard nsIDOMMozURLProperty internal type. However this didn't make any difference in practice, as the only way to access such an object was through window.URL.
IE ? Opera 完全対応 19
完全対応 19
完全対応 15
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Safari 完全対応 7
完全対応 7
完全対応 6
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
WebView Android 完全対応 4.4
完全対応 4.4
完全対応 4
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Chrome Android 完全対応 32
完全対応 32
完全対応 18
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge Mobile 完全対応 12Firefox Android 完全対応 19
補足
完全対応 19
補足
補足 Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683). This has been fixed as of Firefox 57.
補足 To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']);.
未対応 14 — 18
補足
補足 This interface was supported with the non-standard nsIDOMMozURLProperty internal type. However this didn't make any difference in practice, as the only way to access such an object was through window.URL.
Opera Android 完全対応 19
完全対応 19
完全対応 15
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Safari iOS 完全対応 7
完全対応 7
完全対応 6
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Samsung Internet Android ?
URL() constructorChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 26IE 未対応 ? — 11Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 26Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
createObjectURL
実験的
Chrome 完全対応 8Edge 完全対応 12Firefox 完全対応 4
補足
完全対応 4
補足
補足 createObjectURL() is no longer available within the context of a ServiceWorker.
IE 完全対応 10Opera 完全対応 15Safari 完全対応 6WebView Android ? Chrome Android 完全対応 18Edge Mobile ? Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 createObjectURL() is no longer available within the context of a ServiceWorker.
Opera Android 完全対応 15Safari iOS 完全対応 6Samsung Internet Android ?
hashChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 22IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 22Opera Android ? Safari iOS ? Samsung Internet Android ?
hostChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 22IE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 22Opera Android ? Safari iOS ? Samsung Internet Android ?
hostnameChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 22IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 22Opera Android ? Safari iOS ? Samsung Internet Android ?
hrefChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 22IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 22Opera Android ? Safari iOS ? Samsung Internet Android ?
originChrome 完全対応 52Edge 完全対応 12
補足
完全対応 12
補足
補足 Defined in another interface but available to use from URL.
Firefox 完全対応 26
完全対応 26
未対応 26 — 44
補足
補足 This property was on the URLUtils mixin. It has been moved either to the HTMLHyperlinkElementUtils mixin, or directly on the interface.
未対応 26 — 49
補足
補足 Results for URL using the blob scheme incorrectly returned null.
IE ? Opera 完全対応 あり
補足
完全対応 あり
補足
補足 Defined in another interface but available to use from URL.
Safari 完全対応 10
補足
完全対応 10
補足
補足 Defined in another interface but available to use from URL.
WebView Android 完全対応 52Chrome Android 完全対応 52Edge Mobile 完全対応 12
補足
完全対応 12
補足
補足 Defined in another interface but available to use from URL.
Firefox Android 完全対応 26
完全対応 26
未対応 26 — 44
補足
補足 This property was on the URLUtils mixin. It has been moved either to the HTMLHyperlinkElementUtils mixin, or directly on the interface.
未対応 26 — 49
補足
補足 Results for URL using the blob scheme incorrectly returned null.
Opera Android 完全対応 あり
補足
完全対応 あり
補足
補足 Defined in another interface but available to use from URL.
Safari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 Defined in another interface but available to use from URL.
Samsung Internet Android ?
passwordChrome 完全対応 52Edge 完全対応 12
補足
完全対応 12
補足
補足 Defined in another interface but available to use from URL.
Firefox 完全対応 26IE ? Opera 完全対応 あり
補足
完全対応 あり
補足
補足 Defined in another interface but available to use from URL.
Safari 完全対応 10
補足
完全対応 10
補足
補足 Defined in another interface but available to use from URL.
WebView Android 完全対応 52Chrome Android 完全対応 52Edge Mobile 完全対応 12
補足
完全対応 12
補足
補足 Defined in another interface but available to use from URL.
Firefox Android 完全対応 26Opera Android 完全対応 あり
補足
完全対応 あり
補足
補足 Defined in another interface but available to use from URL.
Safari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 Defined in another interface but available to use from URL.
Samsung Internet Android ?
pathnameChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 53
完全対応 53
未対応 22 — 53
補足
補足 pathname and search returned the wrong values so that for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively.
IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 53
完全対応 53
未対応 22 — 53
補足
補足 pathname and search returned the wrong values so that for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively.
Opera Android ? Safari iOS ? Samsung Internet Android ?
portChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 22IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 22Opera Android ? Safari iOS ? Samsung Internet Android ?
protocolChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 22IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 22Opera Android ? Safari iOS ? Samsung Internet Android ?
revokeObjectURL
実験的
Chrome 完全対応 8Edge 完全対応 12Firefox 完全対応 4
補足
完全対応 4
補足
補足 revokeObjectURL() is no longer available within the context of a ServiceWorker.
IE 完全対応 10Opera 完全対応 15Safari 完全対応 6WebView Android ? Chrome Android 完全対応 18Edge Mobile ? Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 revokeObjectURL() is no longer available within the context of a ServiceWorker.
Opera Android 完全対応 15Safari iOS 完全対応 6Samsung Internet Android ?
searchChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 53
完全対応 53
未対応 22 — 53
補足
補足 pathname and search returned the wrong values so that for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively.
IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 53
完全対応 53
未対応 22 — 53
補足
補足 pathname and search returned the wrong values so that for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively.
Opera Android ? Safari iOS ? Samsung Internet Android ?
searchParamsChrome 完全対応 51Edge 完全対応 17Firefox 完全対応 52IE 未対応 なしOpera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 51Chrome Android 完全対応 51Edge Mobile ? Firefox Android 完全対応 52Opera Android ? Safari iOS ? Samsung Internet Android ?
toJSONChrome ? Edge 完全対応 17Firefox 完全対応 54IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 54Opera Android ? Safari iOS ? Samsung Internet Android ?
usernameChrome 完全対応 52Edge 完全対応 12
補足
完全対応 12
補足
補足 Defined in another interface but available to use from URL.
Firefox 完全対応 26IE ? Opera 完全対応 あり
補足
完全対応 あり
補足
補足 Defined in another interface but available to use from URL.
Safari 完全対応 10
補足
完全対応 10
補足
補足 Defined in another interface but available to use from URL.
WebView Android 完全対応 52Chrome Android 完全対応 52Edge Mobile 完全対応 12
補足
完全対応 12
補足
補足 Defined in another interface but available to use from URL.
Firefox Android 完全対応 26Opera Android 完全対応 あり
補足
完全対応 あり
補足
補足 Defined in another interface but available to use from URL.
Safari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 Defined in another interface but available to use from URL.
Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連項目

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: yyss, yumetodo, YuichiNukiyama, fscholz
最終更新者: yyss,