사용자가 "뒤로"버튼을 클릭했는지 감지 - 모바일 브라우저

Question

매우 이상한 요구 사항이 있습니다.

요구 사항은 말한다 : 제품 이미지는 모바일, 제품 세부 정보 페이지에서 브라우저에 back 버튼을 누르면에 다음 라이트에서 열린 제품 상세 페이지에 표시된다

그래서이 아닌 이전 페이지 즉, 제품 그리드 페이지 , 나는 크로스 브라우저에서 다시 버튼을 처리하는 방법을 검색 할 생각.

if (window.history && window.history.pushState) { 

$(window).on('popstate', function() { 
    var hashLocation = location.hash; 
    var hashSplit = hashLocation.split("#!/"); 
    var hashName = hashSplit[1]; 

    if (hashName !== '') { 
    var hash = window.location.hash; 
    if (hash === '') { 
     alert('Back button was pressed.'); 
    } 
    } 
}); 

이뿐만 아니라

window.onbeforeunload = function (e) { 
     var e = e || window.event; 
     var msg = "" 
     $("#blueimp-gallery").hide(); 
     // For IE and Firefox 
     if (e) { 
      e.returnValue = msg; 
     } 

     // For Safari/chrome 
     return msg; 
    }; 

Answer 1

을 시도 : 또한이 시도

window.onload = function() { 
if (typeof history.pushState === "function") { 
    history.pushState("jibberish", null, null); 
    window.onpopstate = function() { 
     history.pushState('newjibberish', null, null); 
     // Handle the back (or forward) buttons here 
     // Will NOT handle refresh, use onbeforeunload for this. 
    }; 
} 
else { 
    var ignoreHashChange = true; 
    window.onhashchange = function() { 
     if (!ignoreHashChange) { 
      ignoreHashChange = true; 
      window.location.hash = Math.random(); 
      // Detect and redirect change here 
      // Works in older FF and IE9 
      // * it does mess with your hash symbol (anchor?) pound sign 
      // delimiter on the end of the URL 
     } 
     else { 
      ignoreHashChange = false; 
     } 
    }; 
    } 
}; 

: 나는 솔루션 아래에 시도 일부 솔루션은 데스크톱 브라우저에서 근무하지만 아무도 Mobile Browsers

에서 일하지

의심의 여지없이 배운대로 onbeforeunload은 탐색 이벤트를 간단하게 취소 할 수있는 방법을 제공하지만 (시작하기 좋은 장소는 this answer 참조) 모든 브라우저에서 원하는 방식으로 작동하지는 않습니다 (많은 사람들이 보안상의 이유로 무엇을 하든지 확인 팝업을 표시합니다. 원인). 아직 시작하지 않았다면 이번 기회를 먼저주십시오. 현재 코드 예제에서 취소 시도가 표시되지 않고 단지 히스토리 조작 만 표시됩니다.

해시 라우팅을 사용하면 URL 해시를 고유 한보기 경로 (Angular, React 등으로 구운)로 관리하고 변경 내용을 history에 푸시하는 라이브러리를 통해 해시 라우팅을 사용하는 것이 좋습니다. 모달 상태에 고유 한 URL (일반적으로 내 경험으로는 수행되지 않음)을 제공하면 '뒤로'이동하면 페이지를 다시로드하는 대신 모달을 닫을 수 있습니다.