html5의 기록 API

HTML5와 CSS3를 사용하여 매우 아름다운 온라인 전자책인 "브라우저와 인터넷에 관한 20가지 사항"을 구현한 Google Chrome 팀에 감탄합니다.

접속주소 : http://www.20thingsilearned.com

이 전자책이 나온지 꽤 됐는데, 오늘 읽어보니 그래도 꽤 좋은 것 같아요. . OPOA(One Page One Application)의 완벽한 구현인 페이지를 새로 고치지 않고도 전자책 페이지를 앞뒤로 전환할 수 있습니다.

저는 현재 히스토리 API에 대해 배우고 있기 때문에 특히 window.history.pushState() 및 window.history.replaceState()를 사용하여 새로 고침 없이 페이지 간을 전환하는 방법에 관심이 있습니다.

오늘 몇 가지 정보를 확인해보니 기본적으로 히스토리 API에 대한 기본적인 이해가 되었습니다.

먼저 말씀드릴 것은 역사는 글로벌 상황, 즉 window.history라는 것입니다. window.history.back() 또는 window.history.go(-1)을 사용하여 이전 페이지를 반환하는 JavaScript 코드를 자주 볼 수 있으므로 이 변수 ​​이름을 잘 알고 있어야 합니다.

그래서 히스토리는 새로운 것이 아닙니다. HTML4 시대에는 다음과 같은 속성과 메서드를 사용할 수 있습니다.

길이: 히스토리 스택의 레코드 수입니다.

back(): 이전 페이지로 돌아갑니다.

forward(): 다음 페이지로 이동합니다.

go([delta]): delta는 숫자입니다. 작성되지 않았거나 0인 경우 이 페이지를 새로 고치고, 양수이면 해당 페이지로 이동합니다. 음수이면 해당 페이지로 돌아갑니다.

이제 HTML5는 다음 두 가지 메소드를 추가합니다.

pushState(data, title [, url]): 기록 스택의 맨 위에 레코드를 추가합니다. data는 창의 popstate 이벤트(window.onpopstate)가 트리거될 때 매개변수의 상태 속성으로 전달되는 객체 또는 null입니다. title은 페이지의 제목이지만 모든 현재 브라우저는 이 매개변수를 무시합니다. 페이지의 URL을 작성하지 않으면 현재 페이지가 됩니다.

replaceState(data, title [, url]): 현재 페이지의 기록을 변경합니다. 매개변수는 위와 동일합니다. 이 변경 사항은 URL에 액세스하지 않습니다. 그러나 현재 Safari 5.0+, Chrome 8.0+, Firefox 4.0+ 및 iOS 4.2.1+에서만 지원됩니다. 이전 브라우저와 호환되기를 원한다면 History.js를 사용해 볼 수 있으며 일부 버그도 수정됩니다.

물론 모바일 플랫폼에서는 html5의 히스토리 API를 과감하게 사용해 볼 수 있습니다. iOS3.0+ 및 Android2.0+ 플랫폼에 내장된 브라우저는 역사에 완벽합니다. 이를 사용하면 웹 앱을 네이티브 앱처럼 만들 수 있습니다.

아래에서 몇 가지 기사를 추천합니다.

.브라우저 기록 조작

.세션 기록 및 탐색

.재미와 이익을 위한 기록 조작