전단 경로 -- History

앞에서 우 리 는 전단 경로 의 방법 인 hash 방법 에 대해 이야기 했다. 오늘 우 리 는 전단 경로 의 또 다른 방식 인 History ヽ (✿ ﾟ ﾟ) ノ 에 대해 토론 했다.
이전 글 을 보지 못 한 어린 이 는 우리 의 역사 글 을 되 돌아 볼 수 있 습 니 다 ~ ~
우선 이 history 가 뭔 지 얘 기해 볼 까요?
js 의 history 대상

window.history window 대상 의 역사 기록

   1.window.history.back()，  

  2.window.history.forward()，  

  3.window.history.go(num)，             

을 나타 낸다.

history.pushState() 방법 은 브 라 우 저 역사 에 상 태 를 추가 했다.

  pushState()        ：      、    (      )       URL  
  
  history.pushState(state, title, url);

window.history.replaceState() 현재 history 실 체 를 수정 합 니 다.

   history.replaceState      pushState      ，      replaceState()                      

popstate 사건, history 실체 가 바 뀌 었 을 때 발생 하 는 사건.

window.history.state, history 실체의 state 대상 을 획득 합 니 다.

위 에서 소개 한 pushState 과 replaceState 는 HTML 5 의 새로운 인터페이스 입 니 다. 그들의 역할 이 매우 큽 니 다. 인터넷 주 소 를 바 꿀 수 있 지만 페이지 를 새로 고 칠 필요 가 없습니다. 아래 에 자세히 알 아 보 겠 습 니 다 ~
상세히 이해 하 다pushState
세 개의 인 자 를 받 아들 이 고 순서대로:
state: 지정 한 사이트 와 관련 된 상태 대상 입 니 다. popstate 이벤트 가 실 행 될 때 이 대상 은 반전 함수 로 전 송 됩 니 다.이 대상 이 필요 하지 않 으 면 null 을 채 울 수 있 습 니 다.
title: 새 페이지 의 제목 이지 만 모든 브 라 우 저 는 현재 이 값 을 무시 하고 있 기 때문에 null 을 작성 할 수 있 습 니 다.
url: 새로운 사이트 주 소 는 현재 페이지 와 같은 도 메 인 에 있어 야 합 니 다.브 라 우 저의 주소 표시 줄 에 이 주 소 를 표시 합 니 다.
가장 많이 사용 되 는 방법: window.history.pushState(null,null,'download?id=1');전체 사용: var oState= {title: ' ' };window.history.pushState(oState, ' ', 'download?id=1');replaceState
push State 원리 와 같이 사용 해도 마찬가지 입 니 다.
가장 많이 사용 되 는 방법: window.history.replaceState(null,null,'download?id=1');전체 사용: var oState= {title: ' ' };window.history.replaceState(oState, ' ', 'download?id=1');

특징: replace State 는 역사 기록 에 가입 하지 않 습 니 다. history. go (- 1) 로 현재 페이지 를 건 너 뛰 는 것 은 history. go (- 2) 에 해당 합 니 다.

밤 이 왔어요 ~

<title>Line Game - 5title>
<p>You are at coordinate <span id="coord">5span> on the line.p>
<p>
 <a href="?x=6" onclick="go(1); return false;">Advance to 6a> or
 <a href="?x=4" onclick="go(-1); return false;">retreat to 4a>?
p>
<script>
 var currentPage = 5; // prefilled by server！！！！
 function go(d) {
     setupPage(currentPage + d);
     history.pushState(currentPage, document.title, '?x=' + currentPage);
 }
 onpopstate = function(event) {
     setupPage(event.state);
 }
 function setupPage(page) {
     currentPage = page;
     document.title = 'Line Game - ' + currentPage;
     document.getElementById('coord').textContent = currentPage;
     document.links[0].href = '?x=' + (currentPage+1);
     document.links[0].textContent = 'Advance to ' + (currentPage+1);
     document.links[1].href = '?x=' + (currentPage-1);
     document.links[1].textContent = 'retreat to ' + (currentPage-1);
 }
script>

이것 은 다른 사람 이 쓴 밤 입 니 다. 우 리 는 Advance to 를 클릭 합 니까?대응 하 는 url 과 모드 는 모두 + 1, 반대로 retreat to 를 클릭 합 니까?도 - 1, 이것 은 url 과 모드 보기 가 동시에 변화 하 는 수 요 를 만족 시 킵 니 다 (후 우 • *).