Node.js는 반환을 클릭하여 지정된 페이지 구현 process_javascript 기술로 이동합니다.-JS 튜토리얼-php.cn

이 기능은 이전에 간략하게 소개한 적이 있습니다. (html5의 새로운 API를 사용하기 때문에 호환성 문제가 있습니다. 모바일 단말기에서는 이 방법을 사용하는 것이 좋습니다.)

기능 설명:

브라우저에서 새 탭을 만들고 URL을 지정하세요. 웹페이지가 로드된 후에는 일반적인 절차에서는 뒤로 클릭이 허용되지 않습니다. 현재 탭 페이지에 해당 기록 기록이 없기 때문에 반환할 기록이 없습니다.

이 경우 고객의 요청에 따라 내역 기록에 링크(홈페이지 등)를 추가해야 새로 열린 페이지에서 돌아가기를 클릭하면 홈 페이지로 이동할 수 있습니다. 사용자는 시스템의 다양한 기능, 프로모션 플랫폼을 볼 수 있습니다.

1. 지식의 핵심

HTML5에는 기록 항목을 하나씩 추가하고 수정할 수 있는 History.pushState() 메서드와 History.replaceState() 메서드가 도입되었습니다. 이러한 메서드는 window.onpopstate 이벤트와 함께 작동합니다.

사례:
http://mozilla.org/foo.html이 다음 JavaScript 코드를 실행한다고 가정합니다.

코드 복사 코드는 다음과 같습니다.

var stateObj = { foo: "bar" }; .pushState( stateObj, "page 2", "bar.html");

이렇게 하면 브라우저의 주소 표시줄에 http://mozilla.org/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이라는 세 가지 매개 변수를 사용합니다. 세 가지 매개변수의 세부정보를 개별적으로 살펴보겠습니다.

상태 객체 — pushState() 메서드로 생성된 새 기록 항목과 연결된 JavaScript 객체입니다. 사용자가 새로 생성된 상태로 이동할 때마다 popstate 이벤트가 시작되고 이벤트 객체의 상태 속성에는 기록 항목의 상태 객체 복사본이 포함됩니다.

직렬화 가능한 모든 객체는 상태 객체로 사용될 수 있습니다. FireFox 브라우저는 사용자가 브라우저를 다시 시작한 후 복원할 수 있도록 상태 개체를 사용자의 하드 드라이브에 저장하기 때문에 상태 개체의 크기를 640k로 제한합니다. 이 제한을 초과하는 상태 객체를 pushState() 메서드에 전달하면 해당 메서드에서 예외가 발생합니다. 많은 양의 데이터를 저장해야 한다면 sessionStorage나 localStorage를 사용하는 것이 좋습니다.

title — FireFox는 현재 이 매개변수를 무시하지만 나중에 사용될 수도 있습니다. 이 메소드는 향후 수정될 수 있다는 점을 고려하면 빈 문자열을 전달하는 것이 더 안전합니다. 또는 진입하려는 상태를 나타내는 짧은 제목을 전달할 수도 있습니다.

주소(URL) — 새 기록 항목의 주소입니다. 브라우저는 pushState() 메서드를 호출한 후에 주소를 로드하지 않지만, 사용자가 브라우저를 다시 시작할 때와 같이 나중에 주소 로드를 시도할 수 있습니다. 새 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() 메서드는 새 주소가 해시만 변경하는 경우에도 hashchange 이벤트를 트리거하지 않습니다.

팝스테이트 이벤트 활성화된 기록이 변경될 때마다 popstate 이벤트가 시작됩니다. 활성화된 기록 항목이 pushState에 의해 생성되었거나 replacementState 메서드에 의해 영향을 받은 경우 popstate 이벤트의 상태 속성에는 기록의 상태 객체 복사본이 포함됩니다.

replaceState() 메서드 History.replaceState() 작업은 교체 상태() 메서드가 새 항목을 생성하는 대신 현재 기록 항목을 수정한다는 점을 제외하면 History.pushState()와 유사합니다.

replaceState() 메서드를 사용하는 것은 일부 사용자 작업에 대한 응답으로 현재 기록 항목의 상태 객체나 URL을 업데이트하려는 경우에 특히 적합합니다.

2. 구현 아이디어 1. popstate 이벤트를 사용하여 클릭 반환 이벤트를 모니터링합니다.

2. 이벤트가 발생하면 현재 페이지의 기록에 반환 가능한 페이지가 있는지 확인합니다.

3. 돌아갈 페이지가 없으면 두 개의 레코드를 삽입합니다.

1) 점프페이지 지정.

2), 빈 기록. (현재 페이지를 변경하지 않고 유지)

3. 구현방법

 //返回之前没页面则返回首页
    function pushHistory() {
      if (history.length < 2) {
        var state = {
          title: "index",
          url: getHttpPrefix + "index.html"
        };
        window.history.pushState(state, "index", location.href);
        state = {
          title: "index",
          url: ""
        };
        window.history.pushState(state, "index", "");
      }
      //lll("history.state" + history.state)
      //console.log(history.state) 
}

로그인 후 복사

페이지가 로드되면 브라우저가 자동으로 레코드를 푸시하므로 현재 기록의 레코드 수를 결정합니다. 그래서 길이가 2보다 작은지 판단해야 합니다.

삽입된 상태 개체는 해당 URL 링크를 얻기 위한 것입니다.
참고:
첫 번째 pushState에서는 점프 작업을 용이하게 하기 위해 점프 URL을 상태 개체에 넣었습니다. 두 번째 매개변수는 현재 브라우저가 기본적으로 이 매개변수를 지원하지 않기 때문에 실질적인 의미가 없습니다.
세 번째 매개변수는 현재 주소 표시줄의 링크를 대체하지만 페이지는 이동하지 않습니다. (이전에 실수로 세 번째 매개변수를 홈페이지 링크로 설정했는데, 이로 인해 주소 표시줄이 홈페이지 링크로 변경되어 현재 페이지의 링크가 홈페이지를 기준으로 점프하여 페이지의 모든 링크가 점프가 잘못되었습니다 )

  setTimeout(function () {
      pushHistory()
      window.addEventListener("popstate", function (e) {
        lll("popstate"+window.history.state)
        if (window.history.state != null && window.history.state.url != "") {
          location.href = window.history.state.url
        }
      });
    }, 300);

로그인 후 복사

이 코드는 페이지의 Ready 이벤트에 배치되어 실행됩니다. 300ms의 지연은 작업을 지연시키고 시스템 팝 이벤트와의 충돌을 방지하기 위한 것입니다.
if 문은 히스토리에 상태 개체가 있는지 확인하는 것인데, 우리의 요구 사항을 충족하는 레코드만 우리가 추가한 상태 개체를 가지게 되므로 이를 기준으로 페이지 점프 작업을 수행할 수 있습니다.
이렇게 하면 우리가 원하는 효과를 얻을 수 있습니다.
4. 마지막에 작성하세요
단점:
1. 물론, 서두에서 언급했듯이. HTML5를 지원하는 브라우저에만 적합합니다.
2. 위챗 등 모바일 단말기의 복귀와 마찬가지로 두 개의 기록이 삽입되기 때문에 페이지를 실행하고 위챗 채팅창으로 돌아가려면 복귀를 두 번 더 클릭해야 하는데, 이는 사용자 경험이 좋지 않습니다.

요약:
이 방법은 확실히 최적화되고 완성될 수 있지만, 현재로서는 그것을 완성하기에는 내 힘이 부족합니다.

이 기사를 읽는 친구들이 영감을 얻거나 영감을 얻기 위한 더 나은 방법을 찾을 수 있기를 바랍니다.