티스토리 뷰
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 |