이 기능은 이전에 간단히 설명했습니다. 이번에는 원칙과 기존 문제를 자세히 설명 할 것입니다 (HTML5의 새로운 API를 사용하므로 호환성 문제가 있으므로 모바일 터미널 이이 방법을 사용하는 것이 좋습니다).
기능 설명 :
브라우저에서 새 탭 페이지를 작성하고 URL을 지정하십시오. 웹 페이지가로드되면 일반 프로세스에서 클릭이 반환 할 수 없습니다. 현재 탭 페이지의 관련 이력이 없기 때문에 레코드를 반환 할 수 없습니다.
고객의 요청에 따라이 경우이 경우 홈페이지와 같은 링크 (예 : 홈페이지)를 그의 히스토리 레코드에 추가하여 새로 열린 페이지에서 클릭하면 홈페이지로 점프하여 사용자가 시스템의 다양한 기능을보고 플랫폼을 홍보 할 수 있습니다.
1. 지식의 핵심 요점
html5는 history.pushstate () 메소드 및 history.replacestate () 메소드를 소개합니다. 이는 항목별로 항목을 추가하고 수정할 수 있습니다. 이 방법은 Window.onPopState 이벤트와 함께 작동 할 수 있습니다.
사례:
http://mozilla.org/foo.html 이 다음 JavaScript 코드를 실행한다고 가정합니다.
코드 사본은 다음과 같습니다. var stateobj = {foo : "bar"}; history.pushstate (StateObj, "Page 2", "Bar.html");
이렇게하면 브라우저의 주소 표시 줄이 표시되면 http://mozilla.org/bar.html이 표시되지만 Bar.html 페이지는로드하거나 Bar.html이 있는지 확인하지 않습니다.
사용자가 이제 http://google.com 으로 탐색 한 다음 뒤로 버튼을 클릭한다고 가정합니다. 현재 주소 표시 줄에는 http://mozilla.org/bar.html이 표시되며 페이지는 Popstate 이벤트를 트리거합니다. 이벤트의 상태 개체에는 StateObj 사본이 포함되어 있습니다. 페이지 컨텐츠가 PopState 이벤트에서 수정 될 수 있지만 페이지는 foo.html처럼 보입니다.
뒤로 버튼을 다시 클릭하면 URL이 http://mozilla.org/foo.html 문서로 다시 변경되어 다른 PopState 이벤트를 트리거합니다. 이번에는 상태 객체가 NULL입니다. 폴백은 또한 문서의 내용을 변경하지 않습니다.
pushstate () 메소드
pushstate ()에는 세 가지 매개 변수, 즉 상태 객체, 제목 (현재 무시 될 것) 및 선택적 URL 주소가 있습니다. 이 세 가지 매개 변수의 세부 사항을 개별적으로 살펴 보겠습니다.
State Object -PushState () 메소드로 생성 된 새로운 기록 항목과 관련된 JavaScript 객체. 사용자가 새로 생성 된 상태로 탐색 할 때마다 PopState 이벤트가 트리거되고 이벤트 객체의 상태 속성에는 역사 항목의 상태 개체의 사본이 포함되어 있습니다.
직렬화 가능한 객체는 상태 대상으로 취급 될 수 있습니다. Firefox 브라우저는 사용자가 브라우저를 다시 시작한 후에 복원 할 수 있도록 상태 객체를 사용자의 하드 디스크에 저장하므로 상태 객체의 크기를 640K로 강제로 제한합니다. 이 한도를 PushState () 메소드로 초과하는 상태 객체를 전달하면 메소드가 예외가 발생합니다. 많은 양의 데이터를 저장 해야하는 경우 SessionStorage 또는 LocalStorage를 사용하는 것이 좋습니다.
제목 - Firefox 브라우저는 현재이 매개 변수를 무시하지만 향후 사용될 수 있습니다. 이 방법이 향후 수정 될 수 있다는 점을 고려하면 빈 문자열을 통과하는 것이 더 안전합니다. 또는 입력하려는 상태를 나타내는 짧은 제목으로 전달할 수도 있습니다.
주소 (URL) - 새로운 역사 항목의 주소. 브라우저는 PushState () 메소드를 호출 한 후 주소를로드하지 않지만 그 후에는 사용자가 브라우저를 다시 시작하는 것과 같이로드하려고 시도 할 수 있습니다. 새로운 URL이 반드시 절대적인 경로는 아닙니다. 상대 경로 인 경우 현재 URL을 기반으로합니다. 전달 된 URL은 현재 URL과 동일해야합니다. 그렇지 않으면 PushState ()는 예외를 던집니다. 이 매개 변수는 선택 사항입니다. 지정되지 않은 경우 문서의 현재 URL입니다.
참고 : Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / Seamonkey 2.1)에서 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / Seamonkey 2.2)에서 통과 된 물체는 JSON을 사용하여 직렬화됩니다. Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / Seamonkey 2.3)으로 시작하여 객체는 구조화 된 사본 알고리즘을 사용하여 직렬화됩니다. 이렇게하면 더 많은 유형의 객체를 안전하게 전달할 수 있습니다.
어떤 의미에서, pushstate ()를 호출하는 것은 Window.location = '#foo'를 설정하는 것과 약간 유사하며 현재 문서 내에서 새로운 기록 항목을 생성하고 활성화합니다. 그러나 pushstate ()는 고유 한 장점이 있습니다.
1. 새 URL은 상 동성 URL 일 수 있습니다. 대조적으로, Window.location 메소드를 사용할 때 해시 만 수정하면 동일한 문서에 머무를 수 있습니다.
2. 개인 요구에 따라 URL을 수정할지 여부를 결정하십시오. 대신, Window.location = '#foo'를 설정하고 현재 해시 값이 foo가 아닌 경우에만 새로운 기록을 만듭니다.
3. 새로운 역사 항목에 추상 데이터를 추가 할 수 있습니다. 해시 기반 방법을 사용하는 경우 관련 데이터를 매우 짧은 문자열로 만 트랜스 코딩 할 수 있습니다.
새로운 주소가 해시 만 변경하더라도 PushState () 메소드는 해시 랜지 이벤트를 트리거하지 않습니다.
팝 스테이트 이벤트
활성화 된 이력이 변경 될 때마다 팝 스테이트 이벤트가 트리거됩니다. 활성화 된 기록 항목이 PushSTATE에 의해 생성되거나 REPLACESTATE 메소드의 영향을받는 경우 PopState 이벤트의 상태 속성에는 히스토리 상태 개체의 사본이 포함됩니다.
replacestate () 메소드
history.replacestate () 조작은 chertor.pushstate ()와 유사합니다. replacestate () 메소드가 새 항목을 작성하는 대신 현재 기록 항목을 수정합니다.
사용자의 특정 작업에 대한 응답으로 현재 기록 항목의 상태 개체 또는 URL을 업데이트하려면 replacestate () 메소드를 사용하여 특히 적합합니다.
2. 구현 아이디어
1. PopState 이벤트를 사용하여 클릭 및 반환 이벤트를 들으십시오.
2. 이벤트가 트리거되면 현재 페이지의 기록을 반환 할 페이지가 있는지 확인하십시오.
3. 반환 할 수있는 페이지가 없으면 두 개의 레코드가 삽입됩니다.
1) 지정된 점프 페이지.
2) 빈 기록. (현재 페이지가 변경되지 않음)
구현 방법
// 함수를 반환하기 전에 페이지없이 홈페이지로 돌아 가기 pusphistory () {if (history.length <2) {var state = {title : "index", url : gethttpprefix + "index.html"}; window.history.pushstate (state, "index", location.href); state = {제목 : "index", url : ""}; window.history.pushstate (state, "index", ""); } //lll("history.state " + history.state) //console.log(history.state)}현재 기록의 기록 수를 결정하십시오. 페이지가로드되면 브라우저가 레코드를 자동으로 푸시하므로. 따라서 길이가 2 미만인지 확인해야합니다.
채워진 상태 객체는 해당 URL 링크를 얻는 것입니다.
메모:
점프 작동을 용이하게하기 위해 첫 번째 푸시 스테이트를 위해 점프 URL을 상태 객체에 넣었습니다. 현재 브라우저는 기본적 으로이 매개 변수를 적용하지 않기 때문에 두 번째 매개 변수는 실제적인 의미가 없습니다.
세 번째 매개 변수는 현재 주소 표시 줄의 링크를 대체하지만 페이지는 점프하지 않습니다. (이전에 실수를 저질렀으며, 세 번째 매개 변수를 홈페이지 링크로 설정하여 주소 표시 줄이 홈페이지 링크로 변경되어 현재 페이지의 링크가 홈페이지에 따라 리디렉션되어 페이지의 모든 링크가 리디렉션됩니다.)
settimeout (function () {pusphistory () window.addeventListener ( "popstate", function (e) {lll ( "popState"+window.State) if (wind 300);이 코드는 페이지의 준비된 이벤트에 배치되며, 300 밀리 초의 지연이 작동을 지연시키고 시스템 POP 이벤트와의 충돌을 방지합니다.
히스토리에 상태 객체가 있는지 여부를 결정하기 위해, 우리의 요구 사항을 충족하는 레코드 만 우리가 추가 한 상태 객체를 갖게 되므로이 지점에 따라 페이지 점프 작동을 수행 할 수 있습니다.
이것은 우리가 원하는 효과를 달성 할 것입니다.
4. 끝에 쓰십시오
결점:
1. 분명히, 처음에 언급 된 바와 같이. HTML5를 지원하는 브라우저에만 적합합니다.
2. 두 개의 레코드가 삽입되었으므로 WeChat과 같은 모바일 터미널의 반환은 페이지를 시작하고 WeChat 채팅 창으로 돌아 가기 전에 2 번의 클릭이 필요합니다.
요약 :
이 방법은 확실히 최적화되고 개선 될 수 있지만, 내 강도는 완벽의 수준까지 완성되기에 충분하지 않습니다.
이 기사를 읽는 친구들이 영감을 얻거나이를 달성하는 더 좋은 방법이 있기를 바랍니다.