[Window_Location] JS - href 속성 ★ - 현재URL주소전체 (+ 특정URL주소이동설정)

목차

1. href 예제 - 현재 URL 주소 전체 반환
2. href 정의
3. href 구문
4. href 예제 - 특정 URL로 이동
5. href 예제 - 특정 앵커로 이동
6. href 예제 - 이메일 보내기

href 예제 - 현재 URL 주소 전체 반환

 

<button onclick="homzzang()">클릭</button>

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

<script>

function homzzang() {

  var x = location.href;

  document.getElementById("demo").innerHTML = x;

}

</script>

 

결과보기 

결과예제: https://homzzang.com/b/js-1505

href 정의

 

현재 URL 주소 전체 반환/설정.

 

---

 

1.

반환 시, http(s) 프로토콜 프함한 URL 원래 주소 반환.
 

2. cf. 이동 관련 (메서드/속성) 차이점 

• replace() - 뒤로가기 불가. (∵ history에서 현재 웹문서의 URL 삭제하고 이동.) 
• assign() - 뒤로가기 가능.
• window.location.href = "newURL"; - 뒤로가기 가능.

 

3.

모든 주요브라우저가 지원.

 

href 구문

URL 주소 반환

location.href

URL 주소 설정

location.href= URL

 

---

[속성값]

URL

링크 URL 주소 문자열. (가능한 값 종류)

절대 URL

다른 웹사이트 (예 : location.href = "https://homzzang.com/index.php").

 

상대 URL
웹 사이트 내의 파일 (예 : location.href = "index.php").

 

앵커 URL
페이지 내 특정 앵커 (예 : location.href = "# top")

 

새 프로토콜
다른 프로토콜 지정 (예)

• FTP: location.href = "ftp://homzzang.com";
• 메일: location.href = "mailto : ";
• 파일: location.href = "file://host/path/example.txt ";

href 예제 - 특정 URL로 이동

 

<button onclick="homzzang()">Homzzang.com 방문하기</button>

<script>

function homzzang() {

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

}

</script>

 

결과보기

href 예제 - 특정 앵커로 이동

 

<a id="top">홈짱닷컴 Homzzang.com</a>

<div></div>

<button onclick="homzzang()">Go to top</button>

<script>

function homzzang() {

  location.href = "#top";

}

</script

 

href 예제 - 이메일 보내기

 

<button onclick="homzzang()">이메일 보내기</button>

<script>

function homzzang() {

  location.href = "mailto:";

}

</script>

 

결과보기