티스토리 뷰

프로그램개발

[Javascript] Location 객체

인생참!! 2024. 3. 20. 13:36
728x90

Location 객체란

location 객체는 현재 브라우저에 표시된 HTML문서의 URL정보를 얻거나, 다른 페이지로 이동시 사용됩니다.

location 객체의 속성 및 메서드를 이용하여 URL의 프로토콜, 호스트네임, 포트, 경로명등 다양한 요소의 정보를 얻을 수 있으며, 처리할 수 있습니다.

window.location이나 document.location 또는 간단하게 location으로 접근이 가능합니다.

 

Location 객체 메소드(Method)

메소드 설명
location.assign() 파라미터로 전달된 URL 문서를 로드 합니다.
session History에 저장됩니다.

ex)
location.assign('https://naver.com');
location.reload() 현재의 URL 문서를 다시 로드 합니다.(새로고침)

ex)
location.reload(true);  // 서버에서 부터 새로고침
location.reload(false);  // 캐쉬에서 부터 새로고침
location.replace(); 파라미터로 전달된 URL 문서로 변경합니다.(리다이렉트)
session History에 저장되지 않는다.(back 시 다시 이전페이지로 이동할수 없다)

ex)
location.replace('https://naver.com');
location.toString() 전체 URL을 담고 있으며, href 와 동일한기능이지만 값을 수정할수 없습니다.

 

Location 객체 속성(Property)

URL : http://localhost:8080/js/index.html? tyhpe=listing&page=3#hash2인 경우

속성 설명
location.href 새로운 URL을 설정하거나, URL전체를 가져옵니다.

ex)
http://localhost:8080/js/index.html?tyhpe=listing&page=3#hash2

var url = " https://naver.com";
location.href = url;
location.assign(url); 
location = url;
// 3개 모두 동일기능(URL로 이동)
location.host 호스트명과 포트번호를 가져옵니다.

ex)
localhost:8080
location.hostname 호스트명을 설정하거나, 가져옵니다.

ex)
localhost
location.hash 해시값(#값)을 가져옵니다.

ex)
#hash2
location.pathname URL의 최초 '/' 이후의 값을 가져옵니다.

ex)
/js/index.html?tyhpe=listing&page=3#hash2
location.origin URL의 프로토콜, 호스트명, 포트번호를 가져옵니다.

ex)
http://localhost:8080
location.port URL의 포트번호를 가져옵니다.

ex)
8080
location.search URL의 Query String를 가져옵니다.

ex)
tyhpe=listing&page=3

location.protocol URL의 프로토콜 정보를 가져옵니다.
마지막 콜론(:)을 포함하여 URL의 프로토콜을 나타냅니다.

ex)
http:
728x90

'프로그램개발' 카테고리의 다른 글

카카오 로그인 REST API [PHP]  (0) 2024.03.22
사이트 주소에 www 강제로 붙이기  (0) 2024.03.21
@media print  (0) 2024.03.19
네이버 로그인 API(OAuth 2.0)  (0) 2024.02.29
Javascript 로드 방식 async 와 defer  (0) 2024.02.15
250x250
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Total
Today
Yesterday