HTML5 히스토리 API는 상쾌한 점프를 구현합니다

내가 **. com에있을 때, 나는 로그인과 등록의 애니메이션 효과가 매우 화려했지만, 충격을 준 것은 페이지가 실제로 새로 고침 점프를 달성 할 수 없다는 것입니다. 나는 배운 프론트 엔드 지식을 검토했으며,이를 달성 할 기술이없는 것 같았습니다. 그래서 나는 바이두에서 검색했고 이것이 원래 HTML5의 히스토리 API를 사용하여 달성되었다는 것을 알았습니다.

**. 나는 배운 프론트 엔드 지식을 검토했으며,이를 달성 할 수있는 기술이없는 것 같았습니다. 그래서 나는 이것이 원래 HTML5의 히스토리 API를 사용하여 달성되었다는 것을 알았지 만 결코 편리하지 않았습니다. 이 기술은 블로그가 개정 될 때까지 적용되지 않았습니다.

1. JS를 통해 브라우저 기록에 항목을 추가하는 기능이 추가되었습니다.

2. 페이지를 새로 고치지 않고 변경된 브라우저 주소 표시 줄에 URL을 표시하십시오.

3. 사용자가 브라우저의 뒤로 버튼을 클릭 할 때 발생하는 이벤트가 추가되었습니다.

위의 세 점을 통해 페이지를 새로 고치지 않고 브라우저 주소 표시 줄의 URL을 동적으로 변경하고 페이지 컨텐츠를 동적으로 표시 할 수 있습니다.

예를 들어, 페이지 A와 페이지 B의 내용이 다르면 HTML5 전에 Page A에서 페이지 B로 전환되면 브라우저의 페이지 A에서 페이지 B로 전환해야합니다. 또는 뒤로 버튼 기능이 필요한 경우 URL 주소에 #xxxx를 추가하여 백 기능을 실현할 수 있습니다. 이제 HTML5에서는 히스토리 API를 통해 다음 처리를 구현할 수 있습니다.

1. AJAX 요청을 보내서 페이지 A의 데이터 B 요청.

2. 페이지 A의 JS를 통해 해당 정보를 해당 위치로로드하십시오.

3. 페이지 A의 URL 주소에서 페이지를 새로 고치지 않고 기록 API를 통해 브라우저 주소 표시 줄의 페이지 B의 URL 주소로 전환하십시오.

1. 역사상 용어 수를 길게하십시오. JavaScript가 관리 할 수있는 히스토리는 브라우저의 앞뒤 키를 사용하여 도달 할 수있는 범위로 제한됩니다. 이 속성은 두 개의 앞뒤 버튼 아래에 포함 된 주소 수의 합을 반환합니다.

1. Back () 뒤로, 백 키를 누르는 것과 같습니다.

2. Forward () 앞으로 진행하는 것은 전방 키를 누르는 것과 같습니다.

3.Go () 사용 : history.go (x); 역사 범위 내에서 지정된 주소로 이동하십시오. x <0이면 x 주소를 뒤로 돌리고 x> 0이면 x 주소를 전달하고 x == 0이면 지금 열린 페이지를 새로 고칩니다. history.go (0)는 location.reload ()와 같습니다.

1. history.pushstate (데이터, 제목 [, url]) : 기록 스택의 맨 위에 레코드를 추가합니다. OnPopState 이벤트가 트리거 될 때 데이터가 매개 변수로 전달됩니다. 제목은 페이지 제목이며 모든 현재 브라우저는이 매개 변수를 무시합니다. URL은 페이지 주소, 선택 사항이며 기본값은 현재 페이지 주소입니다.

2. history.replacestate (데이터, 제목 [, url]) : 현재 기록을 변경하면 매개 변수는 위와 동일합니다.

3. History.State : 위의 방법의 데이터 데이터를 저장하는 데 사용됩니다. 다른 브라우저의 읽기 및 쓰기 권한은 다릅니다.

4. PopState 이벤트 :이 이벤트는 사용자가 브라우저의 후면 또는 전진 버튼을 클릭하면 트리거됩니다. 이벤트를 트리거하는 이벤트 개체의 상태 속성 값은 이벤트 처리 기능에서 읽습니다. 이 속성 값은 PushState 메소드를 실행할 때 사용되는 첫 번째 매개 변수 값으로 브라우저 기록에 추가 된 객체를 동시에 저장합니다.

지금까지 브라우저는 IE10, Firefox4 이상, Chrome 8 이상, Safari5 이상으로 HTML5의 히스토리 API를 지원합니다.