• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 안에 안 들어도록 설정된 경우 로딩 안 될 수 있음.


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
AJAX JS - AJAX - PHP 아작스 예제 ★ (= 입력제시어 = 입력예제)
AJAX JS - AJAX - ASP 아작스 예제 (= 입력제시어 = 입력예제)
AJAX JS - AJAX - DB 아작스 예제 ★ (= 데이터베이스 정보 가져오기) ※ select 태그 optio…
JSON JS - JSON - Introduction (소개)
JSON JS - JSON - Syntax (구문) ★
JSON JS - JSON - JSON vs XML (언어비교)
JSON JS - JSON - Data Types (데이터타입)
JSON JS - JSON - Object (객체)
JSON JS - JSON - Array (배열)
JSON JS - JSON - JSON.parse() 함수 ★ - (JSON문자열 → JS객체) 변환. (= 웹서버와…
JSON JS - JSON - JSON.stringify() 함수 ★ - (JS객체 → JSON문자열) 변환. ※ P…
JSON JS - JSON - PHP (= 서버연동 = DB연동)
JSON JS - JSON - HTML (= 테이블 및 드롭다운 형태로 출력 + 출력개수선택)
JSON JS - JSON - JSONP (= script 이용한 서버연동)
String JS - String - 문자열
String JS - constructor 속성 - 객체생성자함수반환. (문자열 경우)
String JS - length 속성 ★ - 문자열길이 반환 (= length속성 = 렝스속성) ※ 문자개수/텍스트길이…
String JS - prototype 속성(문자열) - 객체에 사용자정의 속성 및 메서드 추가 (프로토타입)
String JS - charAt() 메서드 ★ - 문자열의 지정 위치 문자. (= charAt메서드) ※ 개별문자에 스…
String JS - charCodeAt() 메서드 - 문자열의 지정위치문자의 유니코드 (= charCodeAt메서드 =…
5/67
목록
찾아주셔서 감사합니다. Since 2012