HTML5 History API는 새로 고침이 필요 없는 jump_html5 튜토리얼 기술을 구현합니다.

한번 인터넷 서핑을 하다가 로그인 및 등록 애니메이션 효과가 너무 멋있는 걸 발견했는데, 새로고침 없이도 페이지가 점프할 수 있다는 점이 충격적이었습니다(수정되었으니 여기를 클릭하시면 이 효과를 보실 수 있습니다) : GitHub 또는 FM), 제가 배웠던 프론트엔드 지식을 복습했는데, 이를 달성할 수 있는 기술이 없는 것 같았습니다. 그래서 Baidu에서 검색해 보니 이것이 원래 HTML5의 History API를 사용하여 달성되었다는 것을 알게 되었습니다. 그러나 그것은 한번도 사용된 적이 없습니다. 이 기술이 적용된 것은 블로그가 수정된 이후였습니다.
HTML5에서
1. JS를 통해 브라우저 기록에 항목을 추가하는 기능을 추가했습니다.
2. 페이지를 새로 고치지 않고 브라우저 주소 표시줄에 URL을 표시하고 변경합니다.
3. 사용자가 브라우저의 뒤로 버튼을 클릭할 때 트리거되는 이벤트를 추가했습니다.
위의 세 가지 사항을 통해 브라우저 주소 표시줄의 URL을 동적으로 변경하고 페이지를 새로 고치지 않고도 페이지 내용을 동적으로 표시할 수 있습니다.
예: A페이지와 B페이지의 내용이 다른 경우 HTML5 이전에는 A페이지에서 B페이지로 전환하면 브라우저에서 A페이지에서 B페이지로 전환해야 합니다. 즉, 필요한 경우 뒤로 버튼 기능을 사용하려면 URL 주소에 #XXXX를 추가하여 뒤로 기능을 구현할 수 있습니다. 이제 HTML5에서는 History API를 통해 다음 처리를 구현할 수 있습니다.
1. 페이지 A에서 AJAX 요청을 보내 페이지에서 B 데이터를 요청합니다.
2. A페이지의 JS를 통해 해당 위치에 해당 정보를 로드합니다.
3. History API를 사용하면 페이지를 새로 고치지 않고도 브라우저 주소 표시줄에서 페이지 A의 URL 주소를 페이지 B의 URL 주소로 전환할 수 있습니다.
HTML4의 기록 API
속성
1.length 기록 항목 수입니다. JavaScript가 관리할 수 있는 기록은 브라우저의 "앞으로" 및 "뒤로" 키를 사용하여 도달할 수 있는 범위로 제한됩니다. 이 속성은 "앞으로" 및 "뒤로" 버튼 아래에 포함된 주소의 합계를 반환합니다.
메서드
1.back() 뒤로, "뒤로" 키를 누르는 것과 동일합니다.
2.forward() 전달은 "앞으로" 키를 누르는 것과 같습니다.
3.go() 사용법: History.go(x); 기록 범위 내에서 지정된 주소로 이동합니다. x 0이면 x 주소로 앞으로 이동하고, x == 0이면 현재 열려 있는 웹 페이지를 새로 고칩니다. History.go(0)는 location.reload()와 동일합니다.
HTML5의 기록 API
1.history.pushState(data, title [, url]): 기록 스택의 맨 위에 레코드를 추가합니다. onpopstate 이벤트가 트리거되면 매개변수로 전달됩니다. 제목은 페이지 제목이고 현재의 모든 브라우저는 이 매개변수를 무시합니다. url은 페이지 주소이며 선택 사항이며 기본값은 현재 페이지 주소입니다.
2.history.replaceState(data, title [, url]): 현재 기록 레코드를 변경합니다. 매개변수는 위와 동일합니다.
3.history.state: 위 방법의 데이터를 저장하는 데 사용됩니다. 브라우저마다 읽기 및 쓰기 권한이 다릅니다.
4. popstate 이벤트: 이 이벤트는 사용자가 브라우저의 뒤로 또는 앞으로 버튼을 클릭할 때 트리거됩니다. 이벤트 처리 함수에서는 이벤트를 발생시킨 이벤트 객체의 상태 속성 값을 읽어옵니다. 이 속성 값은 브라우저 히스토리에 레코드 추가 시 동기적으로 저장된 값을 저장하는 pushState 메소드 실행 시 사용되는 첫 번째 파라미터 값입니다. 물체.
지금까지 IE10, firefox4 이상, Chrome8 이상, Safari5, Opera11 이상 브라우저는 HTML5에서 History API를 지원합니다.
HTML:

코드 복사

코드는 다음과 같습니다.

새 문서

ul,li{list-style:none;}
.container{width:px;border:px solid #ccc;overflow:hidden;}
.container ul{float:left;width:px ;}
.container li{width:px;height:px;line-height:px;overflow:hidden;}
.container li a{text-장식:none;}
.container li. 현재 a{color:red;}
.all-content{width:px;float:left;overflow:hidden;}

• 
  测试
  


• 
  测试
  


• 
  测试
  

• 
  
• 
  
•