Usage of new h5 features: monitoring the return key that comes with the App

This article introduces you to the article about using the new features of h5 to easily monitor the return key of any App. It has a good reference value and I hope it can help friends in need.

1. Foreword

Nowadays, there are many new features, new tags, new specifications of h5, etc., and they are constantly being improved. The support of major browser vendors is also quite strong. As front-end programmers, I think we still need to actively pay attention and bravely practice it. Next, I will share with you a very useful new feature of h5 (it is not particularly new at the moment), which can easily monitor the return key of any App, including the physical return key of Android phones, so as to meet further needs in project development. .

2. Cause

About half a year ago, I received a request from PM to use pure h5 to realize the playback, pause and resumption of multi-audio. The page was placed in the Driving Test Booklet App and connected with the client. There is no interaction, so client-related js does not need to be referenced. It seems that this requirement is quite simple, although I have never made a similar requirement before. No matter what, just roll up your sleeves and do it. The learning journey began.

3. Here I will focus on how I monitor the return key that comes with any App, as well as the physical return key in Android machines.

Then why should I monitor? I need to emphasize it again and again. Whether it is WeChat, QQ, App, or the browser on an Apple phone, when it comes to audio and video, the system will automatically pause the current playback when returning to the previous page, but not all Android phones can do this. So we must customize the monitoring ourselves. Many friends may first think of Baidu, and the answer that comes out is nothing more than this

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

Does it look familiar? However, the key requirements could not be perfectly realized. I was racking my brains at that time as to what use this code was. Until I copied this code under the guidance of a great friend

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);

, all the problems were solved.
My personal understanding of the principle of this code is to perform related operations by determining whether the user is browsing the current page.
This is the MDN related link: https://developer.mozilla.org....

4. Mobile phone compatibility

As we all know, current Android systems such as 4.0 and others are low-profile versions. Most Android phones can recognize this attribute, but personal low-profile Android phones cannot recognize it. , the reason is that the kernel version of navigator.userAgent is too low, and many chrome versions are now 64, so if you encounter this problem, just find a way to be compatible with it.

It’s not that you can really monitor the user’s direct operation of the built-in back button in the App through JS, or even the physical back button of Android, but that you can quickly realize your needs by changing your thinking. Hope this feature can help you.

Related recommendations:

How to use the Chrome console to implement 3D model editing (code)

The above is the detailed content of Usage of new h5 features: monitoring the return key that comes with the App. For more information, please follow other related articles on the PHP Chinese website!