新しい h5 機能の使用法: アプリに付属のリターンキーの監視-H5 チュートリアル-php.cn

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

不言

リリース： 2018-07-27 09:23:45

オリジナル

2415 人が閲覧しました

この記事は、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....