전단 경로 -- History

10703 단어 자바 script
앞에서 우 리 는 전단 경로 의 방법 인 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 대상 을 획득 합 니 다.

  • 위 에서 소개 한 pushStatereplaceState 는 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 과 모드 보기 가 동시에 변화 하 는 수 요 를 만족 시 킵 니 다 (후 우 • *).

    좋은 웹페이지 즐겨찾기