이 일련의 기사는 주로 HTML5 관련 지식 포인트를 배우고, 학습 API 지식 지점을 진입 점으로 취하고, 얕은 곳에서 깊은 곳에서 예제를 소개하여 모든 사람이 단계별로 수행 할 수있는 일과 실제 프로젝트에서 합리적으로 사용하는 방법을 이해할 수 있으며 사용의 자유를 달성하고 O (∩__) O ~ ~를 완벽하게 제어 할 수 있습니다.
1. 개방 분석
말도 안되는 말도 안 돼요, 오늘의 주제로 직접 가겠습니다. 오늘날 우리는 주로 역사 API와 단일 페이지 응용 프로그램에서의 역할에 대해 이야기하며 설명을위한 프로토 타입 예제로서 실용적인 예를 소개 할 것입니다. History API를 먼저 살펴 보겠습니다.
웹 페이지의 응답 속도를 향상시키기 위해 점점 더 많은 개발자가 단일 페이지 응용 프로그램 솔루션을 채택하기 시작했습니다. 소위 단일 페이지 구조는 여러 페이지를 전환 할 때 전체 페이지를 새로 고치지 않고 페이지 표시 데이터가 업데이트되고 주소 표시 줄의 URL이 변경되어 사용자 가이 URL을 공유 할 수 있다는 사실을 나타냅니다.
Chrome 또는 Firefox와 같은 브라우저를 사용하여 github.com을 방문하고 plus.google.com을 방문하면 페이지 간 클릭이 Ajax를 통해 비동기 적으로 요청됩니다.
동시에 페이지의 URL이 변경되었습니다. 브라우저를 앞뒤로 잘 지원할 수 있습니다. 그러한 강력한 기능은 무엇입니까? 글쎄, 이것은 오늘날의 주인공에 대해 이야기 할 것입니다. html5는 새로운 API를 인용합니다.
history.pushstate 및 history.replacestate는이 인터페이스를 통해 새로 고침없이 페이지 URL을 변경하는 데 사용됩니다. 역사 인터페이스의 상세한 방법을 살펴 보겠습니다.
코드를 복사하십시오