[javascript] 자바스크립트를 사용하여 현재 페이지를 새로고침, 갱신하지 않으면서 다른 주소로 변경하는 방법
History: pushState()
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
History: pushState() method - Web APIs | MDN
In an HTML document, the history.pushState() method adds an entry to the browser's session history stack.
developer.mozilla.org
history.pushstate(state, title, url)
state = 상태 값을 나타내는 것으로 브라우저에서 앞/ 뒤로 갈 때, 넘겨줄 데이터
title = 변경할 브라우저 제목 (변경을 원하지 않으면 null)
url = 변경할 브라우저 URL
const state = { page_id: 1, user_id: 5 };
const url = "hello-world.html";
history.pushState(state, "", url);
const url = new URL(location);
url.searchParams.set("foo", "bar");
history.pushState({}, "", url);검색 페이지나 페이지네이션(pagination)을 가진 페이지에서 많이 사용됩니다. 즉 검색 조건이나 페이지 전환이 비동기식 ajax로 이루어질때 이를 반영하기 위해 페이지 주소를 함께 변경하는 것입니다. 페이지 주소를 변경해두면 만약 페이지를 리로드, 갱신하더라도 바뀐 주소나 쿼리 스트링 정보를 그대로 가져올 수 있기 때문이죠.
pushstate()의 장점은 페이지 주소만 변경하는 것이 아니라 url 주소를 바꾸면서 동시에 데이터(state)를 전달하거나 타이틀 변경도 가능하다는 점입니다.
- 데이터 state 값 전달 가능
- 페이지 타이틀 변경
window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
}브라우저에서 뒤/앞으로 가는 버튼 클릭 시 onpopstate 이벤트가 발생하며 이때, 콜백함수에서 event.state는 pushState 함수의 인자 값이였던 state 객체가 넘어온 것이다.
onhashchange를 이용할 수도 있다.
'프로그래밍 > Script' 카테고리의 다른 글
| [jQuery] 숫자에 콤마 제거, replace comma (0) | 2023.07.28 |
|---|---|
| [jQuery] TEXTAREA 줄 바꿈,캐리지 리턴(carriage return) 치환 (0) | 2023.07.28 |
| [jQuery] scrollHeight 가져오기 (0) | 2023.07.07 |
| [jQuery] URL에서 해시 값 가져오기 (0) | 2023.07.04 |
| 7 JavaScript Web APIs to build Futuristic Websites you didn’t know (0) | 2023.07.04 |
