新しい h5 機能の使用法: アプリに付属のリターン キーの監視

この記事は、h5 の新機能を使用してアプリのリターンキーを簡単に監視する方法についての記事を紹介します。これは優れた参考値であり、困っている友人に役立つことを願っています。

1. はじめに

現在、h5 には多くの新機能、新しいタグ、新しい仕様などがあり、主要なブラウザ ベンダーのサポートも非常に強力です。フロントエンドプログラマーとしては、まだまだ積極的に注目し、果敢に実践していく必要があると思います。次に、h5 の非常に便利な新機能 (現時点では特に新しいものではありません) を共有します。この機能は、Android スマートフォンの物理的なリターン キーを含む、あらゆるアプリのリターン キーを簡単に監視して、さらなるニーズを満たすことができます。プロジェクト開発におけるニーズ。

2. 原因

半年ほど前に、PM からマルチオーディオの再生、一時停止、再開を実現するためのリクエストを受けました。クライアントとの対話がないため、End 関連の js を引用符で囲む必要はありません。この要件は非常に単純であるように思えますが、私はこれまでに同様の要件を作成したことがありません。何があっても、袖をまくってやってみましょう。学びの旅が始まりました。

3. ここでは、Android スマートフォンの物理的なリターン キーだけでなく、アプリに付属するリターン キーを監視する方法に焦点を当てます。

それでは、なぜ何度もそれを強調する必要があるのでしょうか？ WeChat、QQ、アプリ、または Apple 携帯電話のブラウザのいずれであっても、オーディオとビデオに関しては、前のページに戻るとシステムが現在の再生を自動的に一時停止しますが、すべての Android 携帯電話でこれができるわけではありません。したがって、監視を自分でカスタマイズする必要があります。多くの友人は最初に Baidu を思い浮かべるかもしれませんが、彼らが思いつく答えはこれにほかなりません

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. 携帯電話の互換性

ご存知のとおり、現在の Android システム (4.0 など) は、ナビゲーターのせいで、この属性を認識できません。 userAgent カーネルのバージョンが低すぎます。多くの Chrome は 64 以降なので、この問題が発生した場合は、互換性を保つ方法を見つけてください。

JS を介してアプリに組み込まれた戻るボタンや Android の物理的な戻るボタンのユーザーの直接操作を実際に監視できるわけではありませんが、考え方を変えることでニーズをすぐに実現できるということです。この機能がお役に立てば幸いです。

関連する推奨事項:

3D モデル編集に Chrome コンソールを使用する方法 (コード)

WeChat の js-sdk パッケージの導入に失敗した場合の H5 WeChat 支払いソリューション

以上が新しい h5 機能の使用法: アプリに付属のリターン キーの監視の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。