1、前言

如今 h5 新特性、新標籤、新規範等有很多，而且正在不斷完善中，各大瀏覽器商對它們的支援，也是相當給力。作為前端程式設計師，我覺得我們還是有必要積極關注並勇敢地加以實踐。接下來我將和各位分享一個特別好用的 h5 新特性（目前也不是特別新），輕鬆監聽任何 App 自帶的返回鍵，包括安卓機裡的物理返回鍵，從而實現專案開發中進一步的需求。

2、起因

大概半年前接到 pm 一需求，用純 h5 實現多 audio 的播放、暫停、續播，頁面放至駕考寶典 App 中，與客戶端沒有任何的互動，所以與客戶端相關的 js 不需要引用。看上去這需求挺簡單的嘛，雖然之前也沒做過類似的需求。不管三七二十一，lu起袖子就是幹。開始了學習之旅。

3、我這裡著重介紹下我具體是怎麼監聽任何 App 自帶的返回鍵，以及安卓機裡的物理返回鍵。

那為什麼我要去監聽呢，這裡我有必要強調強調再強調。蘋果手機不管是微信、QQ、App，還是瀏覽器裡，涉及到 audio、video，返回上一頁系統會自動暫停當前的播放的，但不是所有安卓機都可以。所以我們自己必須自定義監聽。很多朋友可能第一想法就是百度，然後出來的答案無非是這樣

1. pushHistory();

2. window.addEventListener("popstate",function(e){

3.    alert("我監聽到了瀏覽器的返回按鈕事件啦");//根據自己的需求實現自己的功能

4. },false);

5. function

   pushHistory(){

6. var state ={

7.        title:"title",

8.        url:"#"

9. };

10.    window.history.pushState(state,"title","#");

11. }

是不是很眼熟？然而關鍵需求不能完美實現，要這段程式碼有何用，當時我也是絞盡腦汁。直到經過大神好友指導，複製了這段程式碼

1. var hiddenProperty ='hidden'in document ?'hidden':

2. 'webkitHidden'in document ?'webkitHidden':

3. 'mozHidden'in document ?'mozHidden'

   :

4. null;

5. var visibilityChangeEvent = hiddenProperty.replace(/hidden/i,'visibilitychange');

6. var onVisibilityChange =function(){

7. if(document[hiddenProperty]){

8.        console.log('頁面非啟用');

9. }else{

10.        console.log('頁面啟用')

11. }

12. }

13. document.addEventListener(visibilityChangeEvent, onVisibilityChange);

所有問題迎刃而解。 這段程式碼的原理我個人理解就是通過判斷使用者瀏覽的是否為當前頁，從而進行相關操作。 這是 MDN 相關連結: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden

4、手機相容性

眾所周知現在的安卓機系統 4.0 等都是低配版了，該屬性大部分安卓機都能識別，個人低配版安卓機無法識別，原因在於 navigator.userAgent 核心版本過低，chrome 現在很多是 64 + 了，所以遇到該問題只要想辦法相容它就好了。

並不是說真的可以通過 JS 監聽到使用者對 App 裡的自帶返回鍵的直接操作，甚至安卓的物理返回鍵，而是通過轉變思路，快速實現需求。希望這個特效能幫到各位。

原文：https://segmentfault.com/a/1190000013700474 作者：駕考寶典WckY

---- 廣告 ----

給大家推薦個活躍的開發者社群：掘金是面向程式設計師的的技術社群，從大廠技術分享到前端開發最佳實踐，掃二維碼下載掘金APP，來掘金你不會錯過任何一個技術乾貨。