[BOM] JS - Window Location 객체 - 위치객체 (= 로케이션객체 = Location객체) ※ location.href 로케이션허프 ※ 주소이동/납치태그

목차

1. window.location 객체 정의
2. window.location.href 속성 - URL 반환
3. window.location.hostname 속성 - 호스트명 반환
4. window.location.pathname 속성 - 경로 반환
5. window.location.protocol 속성 - 프로토콜 반환
6. window.location.port 속성 - 포트 반환
7. window.location.assign() 메서드 - URL 이동

window.location 객체 정의

 

현재 웹페이지 주소(URL) 얻거나 새 웹페이지로 브라우저 리디렉션.

 

---

[window.location 객체의 속성/메서드]

※ window 접두어 없이 사용 가능.

 

• window.location.href 속성: 현재 페이지의 href (URL) 반환
• window.location.hostname 속성: 웹 호스트명(=도메인명) 반환
• window.location.pathname 속성: 현재 페이지 경로와 파일명 반환
• window.location.protocol 속성: 웹 프로토콜 (http:/https:) 반환
• window.location.assign() 메서드: 현재창에서 새 URL 주소로 이동

 
PS. 부모창에 띄우려면, window.top.location.href 이용.

window.location.href 속성 - URL 반환

[현재 URL 반환]

 

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML =  window.location.href;

</script>

 

결과보기

---

[이동할 URL 설정]

 

<input type="button" value="클릭" onclick="homzzang()">

<script>

function homzzang() {

  window.location = "https://homzzang.com";

}

</script>

 

결과보기

window.location.hostname 속성 - 호스트명 반환

 

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML =  window.location.hostname;

</script>

 

결과보기

예제: http://cdpn.io/

홈짱: homzzang.com

window.location.pathname 속성 - 경로 반환

 

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML =  window.location.pathname;

</script>

 

결과보기

예제: /boomboom/v2/index.html

홈짱: /test.php

window.location.protocol 속성 - 프로토콜 반환

 

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML =  window.location.protocol;

</script>

 

결과보기

예제: https:

홈짱: https:

window.location.port 속성 - 포트 반환

 

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML =  window.location.port;

</script>

 

결과보기

※ 대부분 브라우저는 기본 포트 번호 경우, 0 표시하거나 아무 것도 표시 X

※ 기본 포트 번호: (http 경우 80 / https 경우 443)

※ 홈짱: 아무 것도 표시 안 됨.

window.location.assign() 메서드 - URL 이동

 

<input type="button" value="클릭" onclick="homzzang()">

<script>

function homzzang() {

  window.location.assign("https://homzzang.com");

}

</script>

 

결과보기

---

PS. location.assign() 메서드 특징

 

1. 현재창에서 해당 URL 주소로 이동
2. 뒤로가기 가능
3. 마우스허버 시 URL 주소 노출 X 

 

※ 해당 웹페이지가 iframe 안에 안 들어도록 설정된 경우 로딩 안 될 수 있음.