Javascript & JQuery & CSS

Javascript & JQuery & CSS > Javascript - 페이지 갱신 없이 주소를 변경하자 - History.pushState()

등록일 : 2020-08-03 11:35 조회수 : 34,316

페이지를 리로드하지 않고 페이지 주소만 변경할 때 사용합니다.
브라우저가 HTML5를 지원해야 사용 가능합니다. (IE는 10이상)

자세한 내용은

https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

여기에 자세히 서술되어 있습니다.

사용예제는 아래와 같습니다.

var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';
var url = 'hello-world.html';

history.pushState(state, title, url);

state = 세션 히스토리에 넣을 데이터, object형식, 사용하지 않거나 마땅히 넣을 게 없으면 null로 해도 된다.

// state에 잘 아시는 분은.. 설명해주면 고맙겠습니다...(ㅇ_ㅇ);;;

title = 변경할 브라우저 제목 (변경하지 않을 거면 null 로 입력하자)

url = 변경할 브라우저 URL

state = 세션 히스토리에 넣을 데이터, object형식, 사용하지 않거나 마땅히 넣을 게 없으면 null로 해도 된다.
title = 변경할 브라우저 제목 (변경하지 않을 거면 null 로 입력하자)
url = 변경할 브라우저 URL

그럼 위와 같이 적용 후 실행하면

hello-world.html 라는 문서가 없어도 주소는 hello-world.html로 변경되어 있을 것이다!

실제 페이지를 로드하는 것은 아니기 때문에 실제 문서 존재 여부는 중요하지 않다.

페이지 리로딩없이 이런게 가능할줄이야

목록으로