제어 브 라 우 저 자동 가 져 오기 단추

수요 배경 애플 릿 권익 상세 페이지 에서 외부 H5 퀘 스 트 진도 페이지 로 이동 하여 권익 을 조회 하고 수령 합 니 다.

문제 가 발생 한 브 라 우 저 자체 반환 단 추 를 가지 고 이전 애플 릿 페이지 로 돌아 갈 수 없 거나 반환 단 추 를 여러 번 눌 러 이전 애플 릿 페이지 로 돌아 가 야 합 니 다.

솔 루 션 1 (포기) 은 페이지 에 사용자 정의 반환 단 추 를 추가 하여 사용자 가 애플 릿 페이지 로 돌아 가 려 고 했 습 니 다 (너무 못 생 겨 서 페이지 의 모든 위치 에 놓 아 도 이상 하 게 보 입 니 다).

//    JSSDK
import wx from 'weixin-js-sdk';

//     
wx.miniProgram.getEnv(res => {
      if (res.miniprogram) {
      //              
        wx.miniProgram.redirectTo({
          url: '/pages/vip/detail/detail',
        });
      } else {
      //          
        WeixinJSBridge.call('closeWindow');
      }
    });

솔 루 션 2 (채택) 브 라 우 저 자체 반환 단 추 를 가 져 오 는 이 벤트 를 감청 하고 브 라 우 저 를 되 돌려 주 고 어디로 가 는 지 직접 제어 합 니 다.

 //     （         ）
 window.addEventListener(
      'popstate',
      e => {
        //            
        // alert("                ");
        this.goBack();
      },
      false
    );

goBack = () => {
    wx.miniProgram.getEnv(res => {
      if (res.miniprogram) {
        wx.miniProgram.redirectTo({
          url: '/pages/vip/detail/detail',
        });
      } else {
        WeixinJSBridge.call('closeWindow');
      }
    });
  };

//              openid，     openid       （pushHistory）
pushHistory = () => {
    let link = location.href.split('#')[1];
    var state = {
      title: '    ',
      url: `${location.origin}/#${link}`,
    };
    // 
    window.history.pushState(state, state.title, state.url);
  };

pushstate () 는 세 개의 인자 가 필요 합 니 다. 하나의 상태 대상, 하나의 제목 (현재 무시 되 었 습 니 다), 그리고 (선택 가능 한) 하나의 URL 이 필요 합 니 다. 이 세 개의 매개 변수 에 대한 상세 한 내용 을 설명 하 겠 습 니 다.
상태 대상 - 상태 대상 state 는 자 바스 크 립 트 대상 으로 pushstate () 를 통 해 새로운 과거 기록 항목 을 만 듭 니 다.언제든지 사용자 가 새로운 상태 로 탐색 하면 popstate 이벤트 가 실 행 됩 니 다. 또한 이 이벤트 의 state 속성 은 이 과거 기록 항목 상태 대상 의 사본 을 포함 합 니 다.
상태 대상 은 서열 화 될 수 있 는 모든 것 일 수 있다.이 유 는 Firefox 가 사용자 가 브 라 우 저 를 다시 시작 할 때 사용 할 수 있 도록 상태 대상 을 사용자 의 디스크 에 저장 하기 때 문 입 니 다. 저 희 는 상태 대상 이 직렬 화 표시 후 640 k 의 크기 제한 을 규정 합 니 다.push State () 방법 에 직렬 화 된 640 k 이상 의 상태 대상 을 전달 하면 이 방법 은 이상 을 던 집 니 다.더 큰 공간 이 필요 하 다 면 session Storage 와 local Storage 를 사용 하 는 것 을 권장 합 니 다.
제목 - Firefox 는 현재 이 인 자 를 무시 하지만 앞으로 사용 할 수 있 습 니 다.이 곳 에서 빈 문자열 을 보 내 면 미래 에 대한 변경 을 안전하게 방지 할 수 있 을 것 입 니 다.혹은 점프 하 는 state 에 짧 은 제목 을 전달 할 수 있 습 니 다.
URL - 이 매개 변 수 는 새로운 과거 URL 기록 을 정의 합 니 다.pushstate () 를 호출 한 후 브 라 우 저 는 이 URL 을 즉시 불 러 오지 않 지만, 사용자 가 브 라 우 저 를 다시 열 때 와 같은 경우 에 이 URL 을 불 러 올 수 있 습 니 다.새 URL 은 절대 경로 가 아 닙 니 다.새 URL 이 상대 경로 라면 현재 URL 에 비해 처 리 됩 니 다.새 URL 은 현재 URL 과 원본 이 같 아야 합 니 다. 그렇지 않 으 면 pushstate () 에서 이상 을 던 집 니 다.이 매개 변 수 는 선택 할 수 있 습 니 다. 현재 URL 이 부족 합 니 다.어떤 의미 에서 push State () 를 호출 하 는 것 은 window. location = "\ # foo" 를 설정 하 는 것 과 유사 합 니 다. 두 사람 은 현재 페이지 에서 새로운 역사 기록 을 만 들 고 활성화 합 니 다.그러나 push State () 는 다음 과 같은 몇 가지 장점 을 가지 고 있다.
새 URL 은 현재 URL 과 같은 소스 의 임의의 URL 일 수 있 습 니 다.반면 하 쉬 를 수정 할 때 만 window. location 을 설정 해 야 같은 document 이 될 수 있 습 니 다.URL 을 고치 고 싶 지 않 으 면 고치 지 않 아 도 됩 니 다.반대로 window. location = "\ # foo" 를 설정 합 니 다.현재 해시 가 \ # foo 가 아 닐 때 만 새로운 역사 기록 항목 을 만 들 수 있 습 니 다.너 는 임의의 데 이 터 를 새로운 역사 기록 항목 과 연결 할 수 있다.해시 방식 을 바탕 으로 모든 관련 데 이 터 를 짧 은 문자열 로 인 코딩 해 야 합 니 다.제목 이 나중에 브 라 우 저 에 사 용 될 경우 이 데 이 터 는 사용 할 수 있 습 니 다 (해시 는 그렇지 않 습 니 다).push State () 는 hashchange 이 벤트 를 절대 촉발 하지 않 습 니 다. 새로운 URL 이 오래된 URL 과 해시 만 다 르 더 라 도 마찬가지 입 니 다.