Window 함수

단순 페이지 이동 함수

앞뒤로 페이지 이동

window.history.back()

사이트 뒤로가기 버튼을 눌렀을 때 동작하는 함수. 이전에 방문했던 사이트로 이동시켜줌.

window.history.forward()

사이트 앞으로 가기 버튼을 눌렀을 때 동작하는 함수.

특정 페이지로 이동

window.history.go()

세션 히스토리에 저장된 특정 페이지로 이동하기 위한 함수
현재 페이지를 0으로 두고 숫자 앞 뒤로 이동 할 페이지를 나타냄

• window.history.go(-1) : 한 단계 뒤로 가기, window.history.back()과 같은 동작
  - -1 뿐만아니라 window.history.go(-2) (-3) ... 가능
  

• window.history.go(1) : 한 단계 앞으로 가기, window.history.forward()와 같은 동작

• 파라미터가 없이 window.history.go() 로 쓰이면 현재 페이지를 새로고침해줌

세션에 얼마나 많은 페이지가 저장되어있나 확인하고 싶다면,
let pages = window.history.length 로 길이를 뽑아낼 수 있음.

이전 게시글에서도 언급했었지만 History API는 보안상의 이유로 URL을 알려주지 않고 이동만 가능하도록한다.

다양한 동작을 하는 함수

window.history.pushState()

history entry에 새로운 entry를 추가하는 메서드

history.pushState(state, unused)
history.pushState(state, unused, url)

화면을 새로 그리지 않고 URL이 파라미터로 보낸 URL값으로 변경되고 히스토리 엔트리에 추가
SPA를 구현할 때 사용하기 좋음.

state

pushState()에 의해 새로운 history entry가 생성되는 것과 연관된 자바스크립트 객체
유저가 새 state를 향하면, popstate 이벤트가 실행됨. 그리고 이벤트의 state 속성은 history entry의 state를 복사해 가지고 있음.

unused

현재는 사용하지 않지만, 빈 문자열로 넘겨주는 것이 좋음

url

새로운 history entry의 URL 값
새로운 url은 항상 절대적인 경로일 필요는 없음.
다만 상대적인 작성되는 Url은 현재 페이지의 url과 같은 origin을 가져야함
주로 pathname만 넘겨주는 방식으로 사용

history.pushState( , , /home)
history.pushState( , , #title)

❓ 같은 origin

• 같은 스키마, hostname (path는 달라도 됨)
• 80번 포트로 전달된 현재 페이지와 같은 주소
  -> 80번 포트 번호가 기본 포트 번호이기 때문에

window.history.replaceState()

현재의 history.entry를 변경하는 함수

history.replaceState(state, unused)
history.replaceState(state, unused, url)

새로운 entry를 추가하지 않고 현재의 entry 값에 새로운 entry를 덮어씌움
새로운 entry로 이동 후, 뒤로가기로 현재 entry에 이동할 수 없음.

세션 History를 전부 지우거나 권한이 없는 코드로 이동하는 걸 막을 수는 없지만, location.replace()를 이용해 이전 페이지를 덮어씌워 숨기는 방법을 쓸 수 있음.

윈도우 이벤트

WindowEventHandlers.onpopstate = func

윈도우 페이지를 이동하는 이벤트를 감지하는 함수.
func위치에 페이지를 이동할 때마다 실행시키고 싶은 함수를 넣어주면, 페이지 이동 이벤트 발생시 자동으로 해당 함수가 실행됨.

pushState()나 replaceState()에 의해서는 popstate 이벤트가 감지되지 않는다. popstate이벤트는 같은 파일 내 두 history entries간 어디를 갈지 고를 때 동작함.