• Q&A
  • 회원가입
  • 로그인

[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.

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

 

replace()

뒤로가기 불가. 

(∵ history에서 현재 웹문서의 URL 삭제하고 이동.)

 

assign()

뒤로가기 가능.

 

window.location.href = "newURL";

뒤로가기 가능.

 

2.

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

 

 

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>

 

결과보기


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

찾아주셔서 감사합니다. Since 2012