使用h5新特性，輕鬆監聽任何App自帶返回鍵

1、前言

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

2、起因

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

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

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

END

本文作者：JavaScript_w

本文釋出時間：2018年03月14日

本文來自雲棲社群合作伙伴CSDN，瞭解相關資訊可以關注csdn.net網站。