iOS 새 버 전 위 챗 하단 도구 모음 차단 문제 완벽 해결

1.문제 설명:
애플 기기(iOS)위 챗 에서 H5 페이지 를 열 고 첫 페이지 에서 다른 페이지 로 넘 어가 면 페이지 아래쪽 에 전진 과 후퇴 버튼 이 있 는 도구 모음 이 나타 나 는데,이 도구 모음 은 면 아래쪽 의 내용 을 가 려 페이지 의 정상 적 인 사용 에 영향 을 미친다.
2.원인 분석:
이 현상 을 일 으 킨 이 유 는 페이지 가 이동 할 때 위 챗 브 라 우 저 는 window.history 를 통 해 탐색 한 기록 을 읽 기 때 문 입 니 다.이 때 페이지 아래쪽 에 전진 후퇴 버튼 의 도구 모음 을 표시 하여 페이지 아래쪽 내용 을 가 립 니 다.
3.해결 방안:
이 문제 가 발생 한 원인 을 알 게 되면 우리 도 해결 방법 이 생 긴 다.가장 먼저 떠 오 르 는 방안 은 브 라 우 저의 기록 을 제어 하 는 것 이다.보안 문 제 를 고려 하여 브 라 우 저의 과거 기록 은 삭제 와 수정 등 을 지원 하지 않 기 때문에 새로 추가 하거나 교체 하 는 방식 으로 탐색 기록 에 대한 작업 을 수행 할 수 있 기 때문에 다음 과 같은 방안 이 있 을 수 있 습 니 다.
(1)방안 1:페이지 의 경로 전환 방식 을"replace"방식 으로 바 꿉 니 다.원생 쓰기 방법 은 window.location.replace()를 사용 하여 window.location.href 를 대체 할 수 있 습 니 다.vue 에 서 는 this.$router.replace()로 this.$router.push()를 대체 할 수 있 습 니 다.
이렇게 하면 이 문 제 를 해결 할 수 있 을 것 이 라 고 생각 했 지만 테스트 를 통 해 이 방안 에 도 약간의 폐단 이 생 길 수 있다 는 것 을 발견 했다.
4.567917.후진 기능 을 사용 할 수 없고 다른 기종(안 드 로 이 드 기종)에서 후퇴 하면 바로 탈퇴 합 니 다4.567917.일부 외부 페이지 로 이동 한 후 되 돌아 오 면 아래쪽 도구 모음 이 나타 납 니 다첫 번 째 문 제 를 해결 하기 위해 두 번 째 방안 인 감청 브 라 우 저 반환 기능 이 생각 났 다.
(2)방안 2:history 의 state 를 통 해 브 라 우 저의 반환 사건 을 감청 하고 js 코드 를 통 해 브 라 우 저의 페이지 후퇴 작업 을 모 의 하여 후퇴 할 수 없 는 문 제 를 해결 합 니 다.그러나 이 방안 은 코드 변경 이 크 고 페이지 간 의 점프 상황 이 너무 번 거 로 워 잠시 방치 됐다.
조작 history 가 비교적 번 거 로 운 것 을 고려 하여 스타일 수정 을 통 해 호 환 할 수 있 는 지 여 부 를 고려 합 니 다.
(3)방안 3:미디어 조 회 를 사용 하여 두 가지 페이지 스타일 을 수 동 으로 설정 하고 기종 이 iOS 인지 판단 하여 서로 다른 페이지 스타일 을 보 여 주 며 iOS 엔 드 의 아래쪽 단추 표시 줄 위 치 를 미리 남 깁 니 다.그러나 처음 페이지 에 들 어 갔 을 때 하단 표시 줄 이 없 었 고 이 방안 이 판단 해 야 할 iOS 모델 과 버 전 조건 이 너무 많 았 고 스타일 변경 도 커서 잠시 보류 했다.
이 문제 가 발생 한 원인 을 더 분석 해 보 니 가 려 진 주요 원인 은 아래쪽 도구 모음 이 페이지 렌 더 링 을 마 친 후에 렌 더 링 되 었 기 때문에 원래 페이지 를 덮어 쓰 는 문제 가 발생 했 습 니 다.이 도구 모음 을 페이지 렌 더 링 보다 우선 시 할 수 있다 면 페이지 의 시각 높이 는 브 라 우 저 에서 아래쪽 도구 모음 을 제거 한 후의 높이 입 니 다.이렇게 하면 페이지 내용 이 가 려 지 는 문제 가 발생 하지 않 을 것 이다.이런 면 을 생각 한 후에 나 는 제호 가 머리 에 들 어 오 는 것 처럼 마침내 완벽 하 게 해결 할 수 있 는 방법 을 찾 았 다!
(4)최종 방안:페이지 를 불 러 오기 전에 빈 기록 을 자발적으로 추가 하고 브 라 우 저의 history 감청 체 제 를 촉발 하여 브 라 우 저 를 페이지 보다 먼저 아래쪽 도구 모음 을 꺼 내 차단 문 제 를 해결 합 니 다.
그래서 우 리 는 경로 수비 에 window.history 에 대한 처 리 를 추가 해 야 합 니 다.코드 는 다음 과 같 습 니 다.

router.beforeEach((to, from, next) => {
 window.history.replaceState(null, null, window.localtion.href);
 next();
})

프로젝트 는 vue 를 사용 하기 때문에 vue 의 쓰기 만 보 여 줍 니 다.다른 쓰기 방법 을 사용 하 는 학생 들 은 비교 할 수 있 습 니 다.
push State 대신 replace State 를 사용 하 는 이 유 는 후자 가 브 라 우 저 에 과거 기록 데 이 터 를 하나 더 추가 하기 때 문 입 니 다.이 로 인해 브 라 우 저 후퇴 작업 을 할 때 두 번 후퇴 해 야 이전 페이지 로 돌아 갈 수 있 습 니 다.한편,replace State 를 사용 하면 탐색 기록 의 이전 기록 을 교체 하고 현재 페이지 의 주소 로 이전 기록 을 교체 합 니 다.본질 적 으로 탐색 역 사 는 변 하지 않 습 니 다.이로부터 iOS 엔 드 위 챗 의 아래쪽 도구 모음 차단 문 제 를 완벽 하 게 해결 할 수 있 습 니 다.
iOS 새 버 전의 위 챗 하단 도구 모음 차단 문제 가 완벽 하 게 해결 되 었 음 을 알려 드 립 니 다.iOS 위 챗 하단 도구 모음 차단 에 관 한 더 많은 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부탁드립니다!