요즘 h5에는 많은 새로운 기능, 새로운 태그, 새로운 사양 등이 있으며 주요 브라우저 공급업체의 지원도 상당히 강력합니다. 프론트엔드 프로그래머로서 아직은 적극적으로 주의를 기울이고 용감하게 실천해야 한다고 생각합니다. 다음으로, Android 휴대폰의 물리적 리턴 키를 포함하여 모든 앱의 리턴 키를 쉽게 모니터링할 수 있는 h5의 매우 유용한 새 기능(현재는 특별히 새로운 기능은 아님)을 공유하겠습니다. 프로젝트 개발에 필요합니다.
2. 원인약 반년 전 PM으로부터 순수 h5를 사용하여 멀티 오디오의 재생, 일시 정지 및 재개를 실현해 달라는 요청을 받았습니다. 이 페이지는 운전 시험 가이드 앱에 배치되어 있으며 클라이언트와의 상호 작용은 없습니다. 따라서 클라이언트와 관련된 js는 참조할 필요가 없습니다. 이전에 비슷한 요구 사항을 만든 적이 없지만 이 요구 사항은 매우 간단한 것 같습니다. 무슨 일이 있어도 소매를 걷어붙이고 해보세요. 배움의 여정이 시작되었습니다.
3. 여기서는 앱과 함께 제공되는 반환 키와 Android 컴퓨터의 물리적 반환 키를 모니터링하는 방법에 중점을 둘 것입니다.그러면 왜 모니터해야 합니까? 계속해서 강조해야 합니까? WeChat, QQ, 앱 또는 Apple 휴대폰의 브라우저이든 오디오 및 비디오의 경우 시스템은 이전 페이지로 돌아갈 때 현재 재생을 자동으로 일시 중지하지만 모든 Android 휴대폰에서 이를 수행할 수 있는 것은 아닙니다. 따라서 우리는 모니터링을 직접 맞춤화해야 합니다. 많은 친구들이 먼저 바이두(Baidu)를 떠올릴 수 있으며 그 대답은 이것에 지나지 않습니다.
pushHistory(); window.addEventListener(popstate, function(e) { 경고(브라우저의 뒤로 버튼 이벤트를 수신했습니다);//필요에 따라 자체 기능을 구현합니다.}, false); = { 제목: 제목, URL: # }; window.history.pushState(상태, 제목, #) }친숙해 보이죠? 그러나 핵심 요구 사항을 완벽하게 구현할 수는 없었습니다. 당시 저는 이 코드가 어떤 용도로 사용될지 고민하고 있었습니다. 이 코드를 복사한 것은 좋은 친구의 안내를 받은 후에였습니다.
var HiddenProperty = 문서의 'hidden' ? 문서의 'webkitHidden' ? 'mozHidden' : null;var visibleChangeEvent = HiddenProperty.replace(/hidden/i, 'visibilitychange' );var onVisibilityChange = function(){ if (!document[hiddenProperty]) { console.log('페이지 비활성'); }else{ console.log('페이지 활성화됨') }}document.addEventListener(visibilityChangeEvent, onVisibilityChange);모든 문제가 해결되었습니다.
이 코드의 원리에 대한 개인적인 이해는 사용자가 현재 페이지를 탐색하고 있는지 여부를 판단하여 관련 작업을 수행하는 것입니다.
MDN 관련 링크는 다음과 같습니다: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden
JS를 통해 앱에 내장된 뒤로 버튼이나 Android의 물리적 뒤로 버튼까지 실제로 모니터링할 수 있는 것은 아니지만 생각을 바꾸면 요구 사항을 빠르게 실현할 수 있습니다. 이 기능이 도움이 되기를 바랍니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.