HTML5에는 기록 항목을 각각 추가하고 수정할 수 있는 History.pushState() 및 History.replaceState() 메서드가 도입되었습니다. 이러한 메서드는 일반적으로 window.onpopstate와 함께 사용됩니다.
2. pushState() 메소드 예시다음 JavaScript 코드가 http://mozilla.org/foo.html에서 실행된다고 가정합니다.
var stateObj = { foo: bar };history.pushState(stateObj, 페이지 2, bar.html);이렇게 하면 브라우저 주소 표시줄에 http://mozilla.org/bar.html이 표시되지만 브라우저가 bar.html을 로드하거나 bar.html이 존재하는지 확인하지는 않습니다.
이제 사용자가 http://google.com을 방문하여 뒤로 버튼을 클릭한다고 가정해 보겠습니다. 이때 주소 표시줄에는 http://mozilla.org/bar.html이 표시되고 페이지는 popstate 이벤트를 트리거합니다. 이벤트 객체 상태에는 stateObj의 복사본이 포함됩니다. 페이지 자체는 foo.html과 동일하지만 내용은 popstate 이벤트에서 수정될 수 있습니다.
뒤로 버튼을 다시 클릭하면 페이지 URL이 http://mozilla.org/foo.html로 변경되고 문서 객체 문서가 또 다른 popstate 이벤트를 트리거합니다. 이번에는 이벤트 객체 상태 객체가 null입니다. 여기서도 마찬가지입니다. 반환하면 문서의 내용이 변경되지 않습니다. 비록 문서가 popstate 이벤트를 수신할 때 내용이 변경될 수 있지만 해당 내용은 여전히 이전 프레젠테이션과 일치합니다.
3. pushState() 메소드pushState()는 상태 개체, 제목(현재 무시됨) 및 URL(선택 사항)의 세 가지 매개 변수를 사용합니다. 이 세 가지 매개 변수에 대해 자세히 설명하겠습니다.
상태 객체 — 상태 객체 상태는 pushState()를 통해 새로운 기록 항목을 생성하는 JavaScript 객체입니다. 사용자가 새 상태로 이동할 때마다 popstate 이벤트가 시작되고 이벤트의 상태 속성에는 기록 항목의 상태 객체 복사본이 포함됩니다.
title — 이 매개변수는 현재 무시되지만 나중에 사용될 수 있습니다. 빈 문자열을 전달하는 것은 여기서는 안전하지만 나중에는 안전하지 않습니다. 또는 점프 상태에 대한 짧은 제목을 전달할 수 있습니다.
URL — 이 매개변수는 새로운 기록 URL 레코드를 정의합니다. 브라우저는 pushState() 호출 직후에 이 URL을 로드하지 않지만 나중에 사용자가 브라우저를 다시 열 때와 같은 특정 상황에서는 이 URL을 로드할 수 있습니다. 새 URL은 절대 경로일 필요는 없습니다. 새 URL이 상대 경로인 경우 현재 URL을 기준으로 상대 경로로 처리됩니다. 새 URL은 현재 URL과 동일한 출처를 가져야 합니다. 그렇지 않으면 pushState()에서 예외가 발생합니다. 이 매개변수는 선택사항이며 기본값은 현재 URL입니다.
4. pushState() 메소드와 해시값 설정의 차이점어떤 의미에서 pushState()를 호출하는 것은 window.location = #foo를 설정하는 것과 유사하며 둘 다 현재 페이지에 새 기록 레코드를 생성하고 활성화합니다. 그러나 pushState()에는 다음과 같은 장점이 있습니다.
새 URL은 현재 URL과 동일한 출처를 가진 모든 URL이 될 수 있습니다. 그리고 window.location을 설정하면 해시 값만 수정한 경우에만 동일한 파일이 유지됩니다.
원하는 경우 URL을 변경하지 않고 기록 레코드를 생성할 수 있습니다. window.location = #foo;를 설정하면 현재 해시가 #foo가 아닌 경우에만 새 기록 항목이 생성됩니다.
임의의 데이터를 새로운 기록 항목과 연결할 수 있습니다. 해시 값 기반 방법을 사용하면 모든 관련 데이터를 짧은 문자열로 인코딩해야 합니다.
5. replacementState() 메소드History.replaceState()의 사용은 History.pushState()와 매우 유사합니다. 차이점은 replacementState()가 새 기록 항목을 생성하는 대신 현재 기록 항목을 수정한다는 것입니다.
6. 팝스테이트 이벤트활성 기록 항목이 변경될 때마다 해당 창 개체에서 popstate 이벤트가 트리거됩니다. 현재 활성 기록 항목이 History.pushState() 메서드에 의해 생성되었거나 History.replaceState() 메서드에 의해 수정된 경우 popstate 이벤트 객체의 상태 속성에는 이 기록 항목의 상태 객체 복사본이 포함됩니다.
다음과 같이 히스토리 객체에서 직접 상태를 가져올 수도 있습니다.
var currentState = 기록.상태;
History.pushState() 또는 History.replaceState()를 호출하면 popstate 이벤트가 트리거되지 않습니다. opstate 이벤트는 뒤로 및 앞으로 버튼 클릭(또는 JavaScript에서 History.back(), History.forward() 및 History.go() 메소드 호출)과 같은 브라우저의 특정 작업에서만 트리거됩니다.
7. popstate 이벤트의 예현재 웹페이지 주소가 http://example.com/example.html이면 다음 코드를 실행하세요.
window.onpopstate = function(event) { Alert(location: + document.location + , state: + JSON.stringify(event.state));};//이벤트 처리 함수 바인딩.history.pushState({page: 1 } , title 1, ?page=1); //기록 항목 추가 및 활성화 http://example.com/example.html?page=1, 항목 인덱스는 1history.pushState({page: 2}, title 2, ?page=2); //기록 항목 추가 및 활성화 http://example.com/example.html?page=2, 항목 색인은 2history.replaceState({page: 3}, title 3, ? page=3); //현재 활성화된 기록 항목 http://ex..?page=2를 http://ex..?page=3으로 수정하고 항목 인덱스는 3history.back()입니다. // 팝업 위치: http://example.com/example.html?page=1, state: {page:1}history.back(); // 팝업 위치: http://example.com/example.html, state: nullhistory.go(2); // 팝업 위치: http://example.com/example.html?page=3, 상태: {page:3} 8. pushState()의 목적Wang Er은 브라우저에서 반환 이벤트를 모니터링할 수 있기 때문에 주로 pushState()를 사용합니다. 이는 모바일 단말기에서도 적용 가능합니다(직접 실행 가능).
<body> <div>window.onpopstate는 반환 키 이벤트를 모니터링할 수 있습니다.</div> <script> History.pushState({}, ); window.onpopstate = function(event) { //여기에서 브라우저의 반환 이벤트를 모니터링할 수 있습니다. 원하는 작업을 수행합니다. //예: 다른 웹페이지 위치로 이동합니다.href = https://www.baidu.com };물론 window.onhashchange를 사용하여 브라우저에서 반환 이벤트를 모니터링할 수도 있습니다. 다음 코드를 참조하세요(직접 실행 가능).
<body> <div>window.onhashchange는 반환 키 이벤트를 모니터링할 수 있습니다.</div> <script> setTimeout(()=>{ location.hash=a },100) setTimeout(()=>{ window.onhashchange = function(event) { location.href = https://www.baidu.com } },200);위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.