새로운 h5 기능 사용: 앱과 함께 제공되는 반환 키 모니터링-H5 튜토리얼-php.cn

새로운 h5 기능 사용: 앱과 함께 제공되는 반환 키 모니터링

不言

풀어 주다： 2018-07-27 09:23:45

원래의

2415명이 탐색했습니다.

이 기사에서는 h5의 새로운 기능을 사용하여 모든 앱의 반환 키를 쉽게 모니터링하는 방법에 대한 기사를 소개합니다. 이는 좋은 참고 가치가 있으며 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

1. 서문

요즘 h5에는 새로운 기능, 새로운 태그, 새로운 사양 등이 많이 추가되었으며, 주요 브라우저 공급업체의 지원도 상당히 탄탄합니다. 프론트엔드 프로그래머로서 아직은 적극적으로 주의를 기울이고 용감하게 실천해야 한다고 생각합니다. 다음으로, Android 컴퓨터의 물리적 반환 키를 포함하여 모든 앱의 반환 키를 쉽게 모니터링할 수 있는 h5의 매우 유용한 새 기능(현재는 특별히 새로운 기능은 아님)을 공유하겠습니다. 프로젝트 개발에 필요합니다.

2. Cause

약 반년 전에 PM으로부터 멀티 오디오 재생, 일시정지, 재개를 구현해달라는 요청을 받았는데, 운전면허시험장 앱에 페이지가 들어있었습니다. 클라이언트와의 상호작용이 없으므로 클라이언트와의 상호작용이 없었습니다. End 관련 js는 인용할 필요가 없습니다. 이전에 비슷한 요구 사항을 만든 적이 없지만 이 요구 사항은 매우 간단한 것 같습니다. 무슨 일이 있어도 소매를 걷어붙이고 해보세요. 배움의 여정이 시작되었습니다.

3. 여기서는 모든 앱과 함께 제공되는 반환 키와 Android 휴대폰의 물리적 반환 키를 모니터링하는 방법에 중점을 둘 것입니다.

그렇다면 왜 모니터를 해야 합니까? 계속해서 강조해야 하지요. WeChat, QQ, 앱 또는 Apple 휴대폰의 브라우저이든 오디오 및 비디오의 경우 시스템은 이전 페이지로 돌아갈 때 현재 재생을 자동으로 일시 중지하지만 모든 Android 휴대폰에서 이를 수행할 수 있는 것은 아닙니다. 따라서 우리는 모니터링을 직접 맞춤화해야 합니다. 많은 친구들이 바이두를 가장 먼저 떠올리는데, 떠오르는 답은 바로 이렇습니다

pushHistory(); 
window.addEventListener("popstate", function(e) { 
    alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
}, false); 
function pushHistory() { 
    var state = { 
        title: "title", 
        url: "#"
    }; 
    window.history.pushState(state, "title", "#"); 
}

로그인 후 복사

낯설지 않나요? 그러나 핵심 요구 사항을 완벽하게 구현할 수는 없었습니다. 당시 저는 이 코드가 어떤 용도로 사용될지 고민하고 있었습니다. 좋은 친구

var hiddenProperty = 'hidden' in document ? 'hidden' :    
    'webkitHidden' in document ? 'webkitHidden' :    
    'mozHidden' in document ? 'mozHidden' :    
    null;
var visibilityChangeEvent = 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....

4. 휴대폰 호환성

우리 모두 알고 있듯이 4.0 등의 현재 Android 시스템은 로우 프로파일 버전입니다. 대부분의 Android 휴대폰은 내비게이터 때문에 이 속성을 인식할 수 없습니다. userAgent 커널 버전이 너무 낮습니다. 현재 많은 Chrome이 64 이상이므로 이 문제가 발생하면 호환되는 방법을 찾으십시오.

JS를 통해 앱에 내장된 뒤로 버튼이나 심지어 안드로이드의 물리적인 뒤로 버튼을 사용자가 직접 조작하는 것을 실제로 모니터링할 수 있는 것은 아니지만, 생각을 바꾸면 요구 사항을 빠르게 실현할 수 있습니다. 이 기능이 도움이 되기를 바랍니다.