Use the new html5 feature to easily listen to examples of any App's built-in return key, html5app

Use the new html5 feature to easily listen to examples of any App's built-in return key, html5app

1. Preface

There are many new features, new tags, and new specifications in h5, and they are constantly being improved. The support of various browser vendors is also quite powerful. As a front-end programmer, I think we still need to actively pay attention to and practice it bravely. Next, I will share with you a particularly useful new h5 feature (not new at present), allowing you to easily listen to the return keys that come with any App, including the physical return keys on Android, in this way, the project development needs to be further implemented.

2. Cause

I received the pm requirement about half a year ago. I used h5 only to implement multi-audio playback, pause, and resume. The page was placed in the App of the driving test, without any interaction with the client, therefore, js related to the client does not need to be referenced. It seems that this requirement is quite simple, although it has never been done before. No matter how many days it takes, pick up your sleeves as dry. I started my learning journey.

3. Here I will focus on how to monitor the return key of any App and the physical return key of the android server.

So why do I want to listen? I need to emphasize it here. In Apple's mobile phones, whether it is QQ, App, or browser, which involves audio and video, the system will automatically pause the current playback when it returns to the previous page, but not all Android phones can. Therefore, we must customize the listener. Many of my friends may think Baidu is the first one, and the answer is nothing more than this.

PushHistory (); window. addEventListener ("popstate", function (e) {alert ("I have listened to the browser's return button event"); // implement your own functions as needed }, false); function pushHistory () {var state = {title: "title", url: "#"}; window. history. pushState (state, "title ","#");}

Familiar? However, the key requirements could not be fulfilled perfectly. How can this code be used? At that time, I am also racking my brains. This code was copied until it was instructed by a friend of great god.

Var hiddenProperty = 'den den 'in document? 'Ddden ': 'webkitden den' in document? 'Webkitden den ': 'mozhidden' in document? 'Mozhidden ': null; var visibilityChangeEvent = hiddenProperty. replace (/hidden/I, 'visibilitychang'); var onVisibilityChange = function () {if (! Document [hiddenProperty]) {console. log ('page inactivity');} else {console. log ('page activation')} document. addEventListener (visibilityChangeEvent, onVisibilityChange );

All problems are solved.

In my personal understanding, the principle of this Code is to determine whether the user browses the current page and perform related operations.

This is MDN related link: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden

It doesn't mean that you can use JS to listen to the App's built-in return key, or even Android's Physical return key. Instead, you can change your mind to quickly meet your needs. I hope this feature will help you.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.