現在、h5 には多くの新機能、新しいタグ、新しい仕様などがあり、それらは常に改善されており、主要なブラウザ ベンダーのサポートも非常に強力です。フロントエンドプログラマとしては、まだまだ積極的に注目し、果敢に実践していく必要があると思います。次に、h5 の非常に便利な新機能 (現時点では特に新しいものではありません) を共有します。この機能は、Android マシンの物理的なリターン キーを含む、あらゆるアプリのリターン キーを簡単に監視して、さらなるニーズを満たすことができます。プロジェクト開発におけるニーズ。
2. 原因半年ほど前に、PM から、マルチオーディオの再生、一時停止、再開を実現するために Pure h5 を使用したいというリクエストを受けました。ページは運転試験ガイド アプリ内に配置され、クライアントとの対話はありません。したがって、クライアントに関連する js を参照する必要はありません。この要件は非常に単純であるように思えますが、私はこれまでに同様の要件を作成したことがありません。何があっても、袖をまくってやってみましょう。学びの旅が始まりました。
3. ここでは、アプリに付属するリターン キーと Android マシンの物理的なリターン キーを監視する方法に焦点を当てます。では、なぜ何度もそれを強調する必要があるのでしょうか。 WeChat、QQ、アプリ、または Apple 携帯電話のブラウザのいずれであっても、オーディオとビデオに関しては、前のページに戻るとシステムが現在の再生を自動的に一時停止しますが、すべての Android 携帯電話でこれができるわけではありません。したがって、監視を自分でカスタマイズする必要があります。多くの友人は最初に Baidu を思い浮かべるかもしれませんが、その答えはこれにほかなりません。
PushHistory(); window.addEventListener(popstate, function(e) {alert(ブラウザの戻るボタン イベントをリッスンしました);//必要に応じて独自の関数を実装します}, function PushHistory() { var state); = { タイトル: タイトル, URL: # }; window.history.pushState(状態, タイトル, #);見覚えがあるでしょうか？しかし、重要な要件を完全に実現することはできませんでした。当時、私はこのコードが何に役立つのかについて頭を悩ませていました。偉大な友人に導かれて初めて、このコードをコピーしました。
var hiddenProperty = 'hidden' ドキュメント内 ? 'hidden' : 'webkitHidden' ドキュメント内 ? '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/zh-CN/docs/Web/API/Document/hidden
JS を介してアプリに組み込まれた戻るボタンや、Android の物理的な戻るボタンを実際に監視できるわけではありませんが、考え方を変えることでニーズをすぐに実現できます。この機能がお役に立てば幸いです。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。