[js] window.location 객체

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다!

 

url 관련 객체는 사용할때 마다 검색해서 조각조각 알아왔었는데

전체적으로 정리해보고자 포스팅하였습니다 :)

 

예제 도메인) https://dongurami0502.tistory.com:8080/post?topic=window-location#references

 

1. Properties

properties	description	url example
hash	url 상에 존재하는 anchor 값(# 이후의 값) 반환	#references
host	url 의 도메인과 포트 반환	dongurami0502.tistory.com:8080
hostname	url의 도메인 반환	dongurami0502.tistory.com
href	url 반환	https://dongurami0502.tistory.com:8080/post?topic=window-location#references
origin	프로토콜 + url 도메인 + 포트 반환	https://dongurami0502.tistory.com:8080
pathname	url 경로 반환	/post
port	서버 포트 반환	8080
protocol	프로토콜 반환	https:
search	url의 매개변수 반환	?topic=window-location

window.location.hash 는 어느 경우에 사용하는지 궁금해서 좀 더 찾아보았습니다.

 

<a name='top'></a>
<form name="myform">
	<input type="button" value="결과 아래로" onclick="location.hash='bottom'">
    <a name='mid'></a>
    <input type="button" value="원하는 위치로 이동" onclick=moveTo(top)>
</form>
<a name='bottom'></a>

<script>
function moveTo(location) {
    location.hash=location;
}
</script>

결국 <a href="#...">와 동일한 역할을 합니다.

이동하고자 하는 위치에 <a name='(고유 ID)'>를 추가하고, location.hash='(고유 ID)'를 통해 이동시킵니다.

 

 

 

2. Methods

Method	Description
assign(url)	새로운 주소로 이동
reload(boolean)	현재 페이지 새로고침
replace(url)	새로운 주소로 이동(세션 히스토리가 남지 않아 back 불가능)

 

 

[References]

페이지 내에서 원하는 위치로 이동하기 - location.hash

 

[javascript] window.location 객체

Location: hash - Web APIs | MDN