[JS] location.replace() 와 location.href 차이 (+ 페이지 함수)

 

 

자바스크립트로 페이지를 변경하는 방법에는 여러가지가 있다. 그 중 일부를 오늘 비교해 정리할 예정이다.

먼저 가장 많이 사용되는 두 방식에 대해 비교하고 다른 페이지 함수에 대해 정리하도록 하겠다.

 

location.replace() 와 location.href 차이

	location.href	location.replace()
기능	새로운 페이지로 이동	기존 페이지를 새로운 페이지로 변경
형태	속성	메서드
주소 히스토리	기록됨 (이전 페이지 이동 가능)	기록되지 않음 (이전 페이지 이동 불가)
사용 예	location.href = '이동할 페이지'	location.replace('이동할 페이지')

*둘 다 리다이렉트 방식으로 새로운 요청이 가기 때문에 요청에 데이터를 담아 보낼 수는 없다.

*앞에  window.를(전역함수) 붙여도 똑같이 작동한다.

 

 

페이지 함수

location.assign()	히스토리 기록을 남기면서 인자로 받은 페이지로 이동한다.
location.reload()	현재 페이지를 새로고침한다.
open('페이지', '_blank')	인자로 받은 페이지를 새 창 또는 탭으로 연다. 세 번째 인자로 창 width='', height=''를 지정할 수 있다.
a태그.click()	해당  a 태그를 클릭 했을 때 이동하는 페이지로 이동한다.
location.hash = 'CSS selector'	페이지 내 특정 앵커로 이동할 때 사용한다.
history.back()	브라우저에서 한 단계 뒤로 이동한다.
history.forward()	브라우저에서 한 단계 앞으로 이동한다.
history.go(n)	n단계 만큼 이동한다. 음수는 뒤로, 양수는 앞으로 이동한다.
scrollTo(x, y)	페이지를 지정한 x, y 좌표로 스크롤한다.
scrollBy(x, y)	현재 위치에서 상대적으로 x, y 좌표만큼 스크롤한다.
scroll()	스크롤 애니메이션을 포함하여 스크롤한다. ex. window.scroll({ top: 500, behavior: 'smooth' // 부드럽게 스크롤 });
print()	현재 페이지를 인쇄한다.
alert('메세지')	경고창을 띄운다.
confirm( '메세지' )	확인창(확인/취소)을 띄운다.
prompt( '메세지' )	사용자에게 입력을 받는 창을 띄운다.
close()	현재 창을 닫는다.