URL

URL 인터페이스는 URL을 분석, 생성, 정규화, 인코딩 할 때 사용하며, URL의 각 구성요소를 쉽게 읽고 쓸 수 있는 속성을 제공합니다. URL 객체 생성은 생성자에 전체 URL 문자열, 또는 상대 URL과 기준 URL을 생성자에 전달해 진행합니다. 이렇게 생성한 URL 객체를 사용해 URL을 쉽게 바꾸거나 읽을 수 있습니다.

브라우저가 아직 URL() 생성자를 지원하지 않을 땐 Window 인터페이스의 Window.URL 속성으로 URL 객체에 접근할 수 있습니다. 개발에 사용하기 전, 프로젝트의 지원 대상 브라우저를 확인하고, 이런 절차를 추가해야 하는지 결정하세요.

주의: 이 기능은 Web Worker에서 사용할 수 있습니다.

생성자

new URL()
주어진 절대 URL, 또는 상대 URL과 기준 URL 문자열을 사용해 생성한 URL 객체를 생성하고 반환합니다.

속성

hash
'#'과 URL의 프래그먼트 식별자를 담은 USVString입니다.
host
URL의 도메인(호스트 이름), ':', 포트를 담은 USVString입니다.
hostname
URL의 도메인을 담은 USVString입니다.
href
전체 URL을 반환하는 문자열화 속성입니다.
origin Read only
URL의 출처, 즉 스킴, 도메인, 포트를 담은 USVString입니다.
password
도메인 이름 이전에 지정된 비밀번호를 담은 USVString입니다.
pathname
'/'와 URL의 경로를 담은 USVString입니다.
port
URL의 포트 번호를 담은 USVString입니다.
protocol
URL의 프로토콜 스킴을 담은 USVString입니다. 마지막 ':'을 포함합니다.
search
URL의 매개변수 문자열을 나타내는 USVString입니다. 어떤 매개변수라도 존재하는 경우 '?' 문자로 시작해, 모든 매개변수를 포함합니다.
searchParams Read only
search 속성의 매개변수 각각에 접근할 수 있는 URLSearchParams 객체입니다.
username
도메인 이름 이전에 지정된 사용자 이름을 담은 USVString입니다.

메서드

toString()
전체 URL을 담은 USVString을 반환합니다. URL.href와 동일하나, toString()으로는 URL을 편집할 수 없습니다.
toJSON()
전체 URL을 담은 USVString을 반환합니다. URL.href와 동일한 문자열을 반환합니다.

정적 메서드

createObjectURL()
고유한 블롭 URL, 즉 blob: 을 스킴으로 하고, 브라우저 내의 객체를 가리키는 고유한 불투명 문자열을 그 뒤에 붙인 DOMString을 반환합니다.
revokeObjectURL()
이전에 URL.createObjectURL()로 생성한 객체 URL을 취소합니다.

사용 일람

생성자는 url 매개변수를 받으며, 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 = 'démonstration.html';
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"

URLSearchParams 인터페이스를 사용해 URL 쿼리 문자열을 생성하거나 조작할 수 있습니다.

현재 URL의 검색 매개변수를 가져오려면 다음과 같은 코드를 사용하세요.

// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"

toString() 메서드는 단순히 href 속성의 값을 반환하는 것이므로, URL 정규화와 인코딩에 생성자를 직접 사용할 수 있습니다.

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

명세

Specification Status Comment
File API
The definition of 'URL' in that specification.
Working Draft Added the static methods URL.createObjectURL() and URL.revokeObjectURL().
URL
The definition of 'API' in that specification.
Living Standard Initial definition (implements URLUtils).

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
URLChrome Full support 32
Full support 32
Full support 19
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 12Firefox Full support 19
Notes
Full support 19
Notes
Notes Before version 57, Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683).
Notes To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']);.
IE Full support 10Opera Full support 19
Full support 19
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Safari Full support 7
Full support 7
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: webkit
WebView Android Full support 4.4
Full support 4.4
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Chrome Android Full support 32
Full support 32
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Firefox Android Full support 19
Notes
Full support 19
Notes
Notes Before version 57, Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683).
Notes To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']);.
Opera Android Full support 19
Full support 19
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Safari iOS Full support 7
Full support 7
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Samsung Internet Android Full support 2.0
Full support 2.0
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: webkit
URL() constructorChrome Full support 19Edge Full support 12Firefox Full support 26IE No support NoOpera Full support 15Safari Partial support 6
Notes
Partial support 6
Notes
Notes In Safari 14 and earlier, calling the URL constructor with a base URL whose value is undefined causes Safari to throw a TypeError; see WebKit bug 216841.
WebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 26Opera Android Full support 14Safari iOS Partial support 6
Notes
Partial support 6
Notes
Notes In Safari 14 and earlier, calling the URL constructor with a base URL whose value is undefined causes Safari to throw a TypeError; see WebKit bug 216841.
Samsung Internet Android Full support 1.5
createObjectURL
Experimental
Chrome Full support 19Edge Full support 12Firefox Full support 19
Notes
Full support 19
Notes
Notes createObjectURL() is no longer available within the context of a ServiceWorker.
IE Full support 10
Notes
Full support 10
Notes
Notes If the underlying object does not have a content type set, using this URL as the src of an img tag fails intermittently with error DOM7009.
Opera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 25Firefox Android Full support 19
Notes
Full support 19
Notes
Notes createObjectURL() is no longer available within the context of a ServiceWorker.
Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support 1.5
hashChrome Full support YesEdge Full support 13Firefox Full support 22IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
hostChrome Full support YesEdge Full support 13Firefox Full support 22IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
hostnameChrome Full support YesEdge Full support 13Firefox Full support 22IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
hrefChrome Full support YesEdge Full support 13Firefox Full support 22IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
originChrome Full support 32Edge Full support 12Firefox Full support 26
Full support 26
No support 26 — 49
Notes
Notes Results for URL using the blob scheme incorrectly returned null.
IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support ≤37Chrome Android Full support 32Firefox Android Full support 26
Full support 26
No support 26 — 49
Notes
Notes Results for URL using the blob scheme incorrectly returned null.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 6.0
passwordChrome Full support 32Edge Full support 12Firefox Full support 26IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support ≤37Chrome Android Full support 32Firefox Android Full support 26Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 6.0
pathnameChrome Full support YesEdge Full support 13Firefox Full support 53
Full support 53
No support 22 — 53
Notes
Notes 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 No support NoOpera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 53
Full support 53
No support 22 — 53
Notes
Notes 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 Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
portChrome Full support YesEdge Full support 13Firefox Full support 22IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
protocolChrome Full support YesEdge Full support 13Firefox Full support 22IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
revokeObjectURL
Experimental
Chrome Full support 19Edge Full support 12Firefox Full support 19
Notes
Full support 19
Notes
Notes revokeObjectURL() is no longer available within the context of a ServiceWorker.
IE Full support 10Opera Full support 15Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 19
Notes
Full support 19
Notes
Notes revokeObjectURL() is no longer available within the context of a ServiceWorker.
Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support 1.5
searchChrome Full support YesEdge Full support 13Firefox Full support 53
Full support 53
No support 22 — 53
Notes
Notes 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 No support NoOpera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 53
Full support 53
No support 22 — 53
Notes
Notes 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 Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
searchParamsChrome Full support 51Edge Full support 17Firefox Full support 29IE No support NoOpera Full support 38Safari Full support 10WebView Android Full support 51Chrome Android Full support 51Firefox Android Full support 29Opera Android Full support 41Safari iOS Full support 10Samsung Internet Android Full support 5.0
toJSONChrome Full support 71Edge Full support 17Firefox Full support 54IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support 71Chrome Android Full support 71Firefox Android Full support 54Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 10.0
toStringChrome Full support 19Edge Full support 17Firefox Full support 54IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 54Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 6.0
usernameChrome Full support 32Edge Full support 12Firefox Full support 26IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support ≤37Chrome Android Full support 32Firefox Android Full support 26Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기