홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

Html5 페이지의 반환 구현 방법

저자：Eve Cole 업데이트 시간：2025-01-25 18:36:02

이 제목을 보면 도대체 이게 무슨 일인가 하는 생각이 드실 겁니다. 사실 내가 하고 싶은 말은 이것이다. 아래 녹음을 보라.

이러한 종류의 상호 작용은 H5 페이지에서 일반적입니다. 도시 클릭 -> 도시 선택 플로팅 레이어 팝업 -> 돌아가기 버튼을 눌러 플로팅 레이어를 닫습니다.

이러한 작업은 왼쪽 상단/오른쪽 상단에 있는 닫기 버튼을 클릭하지 않고도 수행할 수 있습니다. Fliggy의 H5는 앞으로 이동할 때 팝업 레이어가 있으며, 돌아올 때 팝업 레이어가 닫힙니다. Qunar.com H5 항공권, Meituan H5 호텔).

왜 이렇게 설계되었나요?

H5는 휴대폰에서 작동하기 때문에 왼쪽 상단/오른쪽 상단의 데드 스페이스(취소/닫기) 영역은 물론이고 휴대폰의 손가락 조작 가능 영역의 적용 영역도 매우 작습니다. 이 동작을 들어본 적이 있을 것입니다. 탭하여 뒤로 돌아가세요. 이는 사용자가 조작하기 매우 편리하고 친숙합니다. 도시를 선택한 후 취소를 클릭할 필요 없이 팝업 레이어를 닫으려면 엄지 손가락으로 돌아가기만 하면 됩니다.

달성하는 방법

수요가 매우 많기 때문에 개발자로서 이 기능을 구현하기 위해 최선을 다할 것입니다. 구글링을 할 필요도 없고,history.back(),history.go()와 같은 메소드를 생각할 수 있어야 합니다. 그러나 이를 생각하는 것은 이론적으로는 여전히 쓸모가 없습니다. 브라우저/웹뷰의 반환/전달에는 URL이 변경되었기 때문에 페이지를 다시 로드해야 합니다. SPA(단일 페이지 애플리케이션)에 대해 정말로 알고 있거나 React/Vue를 사용한다면 라우팅이라는 것이 있다는 것을 알아야 합니다. 해시를 변경하고 새로 고칠 수 없는 이러한 URL 변경은 HTML5에 추가된 기록 기능입니다.

역사 인터페이스

 인터페이스 기록 { 서명되지 않은 긴 길이 속성; 읽기 전용 속성 모든 상태; void go(선택 사항 long delta = 0); void pushState(모든 데이터, DOMString 제목, 선택 사항 DOMString? url = null); void replacementState(모든 데이터, DOMString 제목, 선택적 DOMString? url = null);};
  1. 푸시상태
  2. 교체 상태

또 다른 이벤트가 있어요

  1. 온팝스테이트

pushState, replacementState는 히스토리 스택 순서를 변경하는 데 사용되며, 반환 및 앞으로 이동할 때 onpopstate가 트리거됩니다.

vue-router의 구현에서도 마찬가지입니다(라인 1694).

특정 구현

지금까지 많은 내용을 설명했으니 이제 이 기능을 구현하는 방법을 살펴보겠습니다.

pushState와 replacementState의 호환성을 살펴보겠습니다.

모두 녹색이고 사용하기 훨씬 더 안전하다고 느껴집니다.

아이디어:

  1. PushState는 팝업 레이어를 클릭할 때 해시를 추가합니다.
  2. 돌아가기 위해 탭할 때 onpopstate 이벤트가 트리거되면 팝업 레이어가 숨겨지고 해시가 수정됩니다.
 <button onclick=city()> 도시</button><br> <button onclick=calendar()> 달력</button><br> <button onclick=description()> 설명</button> <div id=city class=com style=display: none;> 시뮬레이션 도시 팝업 레이어</div> <div id=calendar class=com style=display: none;> 시뮬레이션 달력 팝업 레이어</div> <div id=description class=com style=display: none;> 설명 팝업 레이어 시뮬레이션</div>
 버튼 { 테두리: #f90; } .com { 위치: 절대값: 0; 왼쪽: 0;
 var cityNode = document.getElementById('city'); var CalendarNode = document.getElementById('calendar'); var DescriptionNode = document.getElementById('description'); ; window.history.pushState({'id':'city'},'','#city') } function Calendar() { CalendarNode.style.display = 'block'; window.history.pushState({'id':'calendar'},'','#calendar') } 함수 설명() { DescriptionNode.style.display = 'block'; window.history.pushState({'id':'description'},'','#description') } window.addEventListener('popstate', function(e){ // Alert('state:' + e.state + ', HistoryLength:' + History.length); if (e.state && e.state.id === 'city') { History.replaceState('','','#'); cityNode.style.display = 'block'; } else if (e.state && e.state.id === 'calendar') {history.replaceState('','','#'); 표시 = '차단'; } else if (e.state && e.state.id === 'description') { History.replaceState('','','#') 설명Node.style.display = 'block' } else { cityNode .style.display = 'none'; CalendarNode.style.display = 'none'; DescriptionNode.style.display = 'none' } )

주로 JS 코드를 살펴보고 페이지의 앞으로 및 뒤로 이벤트를 모니터링하여 기록을 제어합니다.

소스코드는 여기에

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.

관련 기사