Example of using the new HTML5 features to easily monitor the return key of any App

Nowadays, h5 has many new features, new tags, new specifications, 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 in Android machines, so as to meet further needs in project development. .

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 is placed in the Driving Test Guide App, and there is no interaction with the client, so js related to the client 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.

So 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 then the answer is nothing more than this

 pushHistory(); window.addEventListener(popstate, function(e) { alert(I listened to the browser's back button event);//Implement your own functions according to your own needs}, 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. It wasn’t until I was guided by a great friend that I copied this code.

 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('Page inactive'); }else{ console.log('Page activated') }}document.addEventListener(visibilityChangeEvent, onVisibilityChange);

All problems are 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/zh-CN/docs/Web/API/Document/hidden

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.