HTML5의 역사 API에 파고 들었습니다

이 기사는 주로 HTML5 history API의 심층적 인 탐색을 소개하며 새로운 방법 history.pushstate () 및 history.replacestate ()에 중점을 둡니다. 필요한 친구는 그것을 참조 할 수 있습니다.

역사는 재미 있지 않습니까? 이전 HTML 버전에서는 탐색 기록에 대한 작업이 매우 제한적이었습니다. 우리는 앞뒤로 사용할 수있는 방법을 사용할 수 있지만 그것이 우리가 할 수있는 모든 것입니다.

그러나 HTML 5 히스토리 API를 사용하여 브라우저의 기록을 더 잘 제어 할 수 있습니다. 예를 들어, 히스토리 목록에 레코드를 추가하거나 주소 표시 줄이 새로 고치지 않을 때 URL을 업데이트 할 수 있습니다.

History API를 소개하는 이유는 무엇입니까?

이 기사에서는 HTML 5의 히스토리 API의 기원에 대해 배울 것입니다.이 전에는 종종 해시 값을 사용하여 페이지 컨텐츠, 특히 페이지에 특히 중요한 내용을 변경했습니다. 새로 고침되지 않기 때문에 단일 페이지 응용 프로그램에 대해 URL을 변경하는 것은 불가능합니다. 또한 URL의 해시 값을 변경하면 브라우저의 기록에 영향을 미치지 않습니다.

그런 다음 이제 HTML 5 히스토리 API의 경우 구현하기 쉽지만 단일 페이지 응용 프로그램은 해시 값을 사용할 필요가 없으므로 추가 개발 스크립트가 필요할 수 있습니다. 또한 SEO 친화적 인 방식으로 새로운 응용 프로그램을 구축 할 수 있습니다. 또한 대역폭을 줄일 수 있지만 어떻게 증명할 수 있습니까?

이 기사에서는 히스토리 API를 사용하여 위의 문제를 증명하기 위해 단일 페이지 응용 프로그램을 개발할 것입니다.

이것은 또한 먼저 홈페이지에 필요한 리소스를로드해야한다는 것을 의미합니다. 이제 시작하면 페이지가 필요한 콘텐츠 만로드합니다. 다시 말해, 응용 프로그램은 처음에 모든 컨텐츠를로드하지 않으며 두 번째 응용 프로그램 컨텐츠를 요청할 때만로드됩니다.

완전한 페이지 컨텐츠가 아니라 리소스의 일부만 제공하기 위해 서버 측 인코딩을 수행해야합니다.

이 기사를 쓸 때 주요 브라우저의 역사 API 지원은 매우 좋습니다. 귀하는 여기를 클릭하여 지원을 볼 수 있습니다. 이 링크는 지원되는 브라우저를 알려주고 사용하기 전에 특정 지원 기능을 감지하는 좋은 관행이 있습니다.

브라우저가 어떤 방식 으로이 API를 지원하는지 여부를 결정하려면 다음 코드 줄을 사용하여 다음을 확인할 수 있습니다.